From 6881ff35ec8cc27b1dc6e424f615099bf4b9bffb Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 10 Feb 2025 18:44:16 -0500
Subject: [PATCH 01/13] CASH-153: duplicate date-picker and begin styling

---
 .../date-picker/date-picker-2.vue             | 1093 +++++++++++++++++
 src/layouts/schedule/schedule.vue             |    9 +-
 2 files changed, 1098 insertions(+), 4 deletions(-)
 create mode 100644 src/digital-components/date-picker/date-picker-2.vue

diff --git a/src/digital-components/date-picker/date-picker-2.vue b/src/digital-components/date-picker/date-picker-2.vue
new file mode 100644
index 000000000..a1af80723
--- /dev/null
+++ b/src/digital-components/date-picker/date-picker-2.vue
@@ -0,0 +1,1093 @@
+<template>
+    <div class="date-picker text-center" :class="calendarViewDirection">
+        <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
+            <legend class="sr-only">Select a day and time</legend>
+            <div
+                v-for="month in months"
+                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                class="calendar-grid-container"
+                :class="[
+                    hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
+                    month.monthClass,
+                ]">
+                <div class="month-year body-small d-flex align-items-center small">
+                    {{ month.monthLabel }} {{ month.yearNum?.toString() }}
+                </div>
+                <div
+                    v-if="calendarViewDirection === 'future'"
+                    class="legend caption d-flex align-items-center justify-content-end">
+                    <span class="legend-circle me-1"></span> &equals; Available
+                </div>
+                <div class="separator-line"></div>
+                <div class="nav-back ps-3"><button></button></div>
+                <div class="nav-forward pe-3"><button></button></div>
+                <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
+                <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
+                <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
+                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
+                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
+                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
+                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div
+                    v-for="date in month.dates"
+                    :key="date.inputValue"
+                    :id="date.inputValue"
+                    class="grid-item radio-wrapper"
+                    :class="[
+                        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
+                        date.dayClasses,
+                        date.isSelectable ? 'selectable-day' : '',
+                    ]">
+                    <!-- <h3>{{ date.inputValue }}</h3> -->
+                    <input
+                        :disabled="!date.isSelectable"
+                        type="radio"
+                        name="day-of-month"
+                        v-model="selectedDate"
+                        @click="fireDateSelectedEvent"
+                        @keypress.enter="fireDateSelectedEvent"
+                        :value="date.inputValue"
+                        :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
+                    <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
+                        <span>{{ date.dateNum.toString() }}</span>
+                    </label>
+                </div>
+            </div>
+            <loader
+                :class="[!isLoading ? 'date-picker-hidden' : '']"
+                loaderColor="blue"
+                loaderPosition="center" />
+            <div class="row form-test-error" id="date-of-month-error">
+                <ErrorMessage :name="customComponentId" class="small mt-1"></ErrorMessage>
+            </div>
+            <button
+                v-if="calendarViewDirection === 'future' && !disableViewMoreDatesButton"
+                type="button"
+                class="btn btn-link"
+                id="viewMoreDates"
+                :disabled="isLoading"
+                @click="showAnotherMonth">
+                View more dates
+            </button>
+        </fieldset>
+    </div>
+</template>
+
+<script>
+// Supporting files
+import loader from "@/ux-components/loader/loader";
+import store from "@/store";
+import { TIMINGFUNC_MAP, BUFFER_OFFSET, MONTHS_OF_YEAR } from "./mixins/constants";
+import { selectableDaysOptions, requiredParameter, forceTwoDigitString } from "./mixins/helpers";
+import {
+    convertDateToDateString,
+    convertDateStringToDate,
+} from "@/layouts/schedule/helpers/schedule-helper";
+import { useField, ErrorMessage } from "vee-validate";
+
+import { deepClone } from "@/helpers/object-helper";
+import { v4 as uuidv4 } from "uuid";
+
+export default {
+    name: "datePicker2",
+    data() {
+        return {
+            isLoading: true,
+            months: null,
+            disableViewMoreDatesButton: false,
+            selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
+            hideSomeDaysForInitialView: null,
+        };
+    },
+    props: {
+        customComponentId: String,
+        selectableDatesSetting: {
+            type: String,
+            validator(value) {
+                return Object.values(selectableDaysOptions).includes(value);
+            },
+            default: selectableDaysOptions.PAST,
+        },
+        modelValue: {
+            type: Object,
+        },
+        todayOverrideDateString: {
+            // keep for use in unit tests to override today's date
+            type: String,
+            default: null,
+        },
+        customSelectableDatesCallback: {
+            type: Function,
+            default() {
+                return [];
+            },
+        },
+        validationRules: {
+            type: String,
+            default: "",
+        },
+    },
+    setup(props) {
+        const uuid = uuidv4();
+        const componentId = !props.customComponentId
+            ? `component-${uuid}`
+            : props.customComponentId;
+
+        const modelValue = deepClone(props).modelValue;
+        const initialValue = modelValue;
+
+        const fieldOptions = {
+            value: modelValue,
+            initialValue: initialValue,
+        };
+
+        const { errorMessage, handleBlur, handleChange, meta, validate, errors, resetField } =
+            useField(componentId, props.validationRules, fieldOptions);
+
+        return {
+            componentId,
+            errorMessage,
+            handleBlur,
+            handleChange,
+            validate,
+            meta,
+            errors,
+            resetField,
+        };
+    },
+    computed: {
+        todayString() {
+            return this.todayOverrideDateString || convertDateToDateString(new Date());
+        },
+        todayDayIndex() {
+            return convertDateStringToDate(this.todayString).getDay();
+        },
+        todayDateNum() {
+            return convertDateStringToDate(this.todayString).getDate();
+        },
+        currentWeekStartDateNum() {
+            return this.todayDayIndex >= this.todayDateNum
+                ? 1
+                : this.todayDateNum - this.todayDayIndex;
+        },
+        currentWeekEndDateNum() {
+            return this.todayDateNum + (6 - this.todayDayIndex);
+        },
+        calendarViewDirection() {
+            if (this.selectableDatesSetting === "custom") return "future";
+            return "past";
+        },
+        selectedDate: {
+            get() {
+                return this.modelValue;
+            },
+            set(newSelectedDate) {
+                this.$emit("update:modelValue", newSelectedDate);
+            },
+        },
+    },
+    methods: {
+        initializeComponent(initialData) {
+            this.setCalendarData(initialData);
+        },
+        fireDateSelectedEvent(event) {
+            // Ignore if arrow key selected radioButton
+            if (event.screenX === 0 && event.screenY === 0) {
+                return;
+            }
+            this.$emit("date-clicked");
+        },
+        fireDateSelectedEvent2(date) {
+            console.log("date:  ", date);
+            this.selectedDate = date;
+            this.$emit("date-clicked");
+        },
+        getWeekStartDate(dateString) {
+            const date = convertDateStringToDate(dateString);
+            const dayOfWeek = date.getDay();
+            // Subtract the day of the week from date to get the date of Sunday
+            const sunday = new Date(date);
+            sunday.setDate(sunday.getDate() - dayOfWeek);
+            return convertDateToDateString(sunday);
+        },
+        getWeekEndDate(dateString) {
+            const date = convertDateStringToDate(dateString);
+            const dayOfWeek = date.getDay();
+            const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
+            // Clone the given date and add the remaining days until Saturday
+            const saturday = new Date(date);
+            saturday.setDate(date.getDate() + daysUntilSaturday);
+            return convertDateToDateString(saturday);
+        },
+        getNextWeekSunday(dateString) {
+            const date = convertDateStringToDate(dateString);
+            const dayOfWeek = date.getDay();
+            const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
+            // Clone the given date and add the remaining days until Sunday
+            const nextSunday = new Date(date);
+            nextSunday.setDate(date.getDate() + daysUntilNextSunday);
+            return convertDateToDateString(nextSunday);
+        },
+        getMonthEnd(dateStr) {
+            // convert string to date, do date calc, then return a string back
+            const date = new Date(dateStr.split("-")[0], parseInt(dateStr.split("-")[1]), 0);
+            return convertDateToDateString(date);
+        },
+        getInitialViewWeeks(todayString, initialViewRowsToShow, preSelectedDateString) {
+            // TODO: this only is for future direction; need to create logic for past direction
+            const weeks = [];
+            let weekStartDate = this.getWeekStartDate(todayString);
+            let weekEndDate = this.getWeekEndDate(todayString);
+
+            if (preSelectedDateString) {
+                let preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
+                let weekIncludesPreSelectedMonthEnd = false;
+                let i = 0;
+                while (!weekIncludesPreSelectedMonthEnd) {
+                    if (i > 0) {
+                        weekStartDate = this.getNextWeekSunday(weekEndDate);
+                        weekEndDate = this.getWeekEndDate(weekStartDate);
+
+                        if (
+                            (preSelectedDateMonthEnd > weekStartDate &&
+                                preSelectedDateMonthEnd < weekEndDate) ||
+                            preSelectedDateMonthEnd === weekStartDate ||
+                            preSelectedDateMonthEnd === weekEndDate
+                        ) {
+                            weekEndDate = preSelectedDateMonthEnd;
+                            weekIncludesPreSelectedMonthEnd = true;
+                        }
+                    }
+                    weeks.push({
+                        weekNum: i + 1,
+                        weekStartDate: weekStartDate,
+                        weekEndDate: weekEndDate,
+                    });
+                    i++;
+                }
+            } else {
+                for (let i = 0; i < initialViewRowsToShow; i++) {
+                    if (i > 0) {
+                        weekStartDate = this.getNextWeekSunday(weekEndDate);
+                        weekEndDate = this.getWeekEndDate(weekStartDate);
+                    }
+                    weeks.push({
+                        weekNum: i + 1,
+                        weekStartDate: weekStartDate,
+                        weekEndDate: weekEndDate,
+                    });
+                }
+                // If any of these weeks is split between two months, then make them 2 separate "weeks"
+                // (a week split between two months is considered 2 weeks per business requirements)
+                const hasSplitWeek = (week) => {
+                    return week.weekStartDate.split("-")[1] !== week.weekEndDate.split("-")[1]
+                        ? true
+                        : false;
+                };
+                const splitWeekIndex = weeks.findIndex(hasSplitWeek);
+
+                if (splitWeekIndex > -1) {
+                    const week1 = [];
+                    const week2 = [];
+                    let switchToWeek2 = false;
+
+                    for (let j = 0; j < 7; j++) {
+                        const newDate = convertDateStringToDate(
+                            weeks[splitWeekIndex].weekStartDate
+                        );
+                        newDate.setDate(newDate.getDate() + j);
+                        if (newDate.getDate() === 1) switchToWeek2 = true;
+                        if (switchToWeek2) {
+                            week2.push(convertDateToDateString(newDate));
+                        } else {
+                            week1.push(convertDateToDateString(newDate));
+                        }
+                    }
+
+                    const week1EndDate = week1[week1.length - 1];
+                    const week2StartDate = week2[0];
+
+                    if (week1EndDate < todayString) {
+                        // replace week 1 with week 2
+                        weeks[splitWeekIndex].weekStartDate = week2StartDate;
+                    } else {
+                        const newWeek = {
+                            weekNum: weeks[splitWeekIndex].weekNum,
+                            weekStartDate: week2StartDate,
+                            weekEndDate: weeks[splitWeekIndex].weekEndDate,
+                        };
+                        weeks[splitWeekIndex].weekEndDate = week1EndDate;
+                        weeks.splice(splitWeekIndex + 1, 0, newWeek);
+                        weeks.pop();
+                        weeks.forEach((item, index) => {
+                            if (index > splitWeekIndex) {
+                                item.weekNum = item.weekNum + 1;
+                            }
+                        });
+                    }
+                }
+            }
+            return weeks;
+        },
+        async loadInitialData(config) {
+            /*
+             ** NOTE: this _could_ be called by a parent before fully loaded, so data or computeds might not be available
+             */
+            let todayDateString;
+            let calendarViewDirection = "none";
+            let hideSomeDaysForInitialView = false;
+            let hideSecondMonth = false;
+
+            if (this.todayString) {
+                todayDateString = this.todayString;
+            } else if (config.todayOverrideDateString) {
+                todayDateString = config.todayOverrideDateString;
+            } else {
+                todayDateString = convertDateToDateString(new Date());
+            }
+            if (config.selectableDatesSetting === "past") calendarViewDirection = "past";
+            if (config.selectableDatesSetting === "custom") calendarViewDirection = "future";
+
+            const currentMonthEnd = this.getMonthEnd(todayDateString);
+            // TODO - set up currentMonthStart if direction is PAST:
+            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
+            const initialViewWeeks = this.getInitialViewWeeks(
+                todayDateString,
+                config.initialViewRowsToShow,
+                config.preSelectedDate
+            );
+            const initialViewStartDate = todayDateString;
+            const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
+
+            if (!config.preSelectedDate) {
+                const firstSaturdayMonth = initialViewWeeks[0].weekEndDate.split("-")[1];
+                const lastSundayMonth =
+                    initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.split("-")[1];
+
+                if (calendarViewDirection === "future") {
+                    if (firstSaturdayMonth !== lastSundayMonth) {
+                        hideSomeDaysForInitialView = true;
+                    }
+                    if (initialViewStartDate.split("-")[1] === lastSundayMonth) {
+                        hideSecondMonth = true;
+                        if (currentMonthEnd > initialViewEndDate) {
+                            // should part of 1st month be hidden?
+                            hideSomeDaysForInitialView = true;
+                        }
+                    }
+                }
+                // TODO - NEED TO CREATE OPPOSITE LOGIC FOR "past" DIRECTION LIKE THE ABOVE ^ ^ ^
+            }
+
+            const loadInitialDataPromise = new Promise((resolve, reject) => {
+                const response = config.customSelectableDatesCallback(
+                    initialViewStartDate,
+                    initialViewEndDate,
+                    store.getters.order.serviceLocation.appointmentType,
+                    store.getters.order.serviceLocation.provider.providerNumber
+                );
+                resolve(response);
+            });
+
+            return loadInitialDataPromise.then((response) => {
+                const initialData = {
+                    todayDate: todayDateString,
+                    initialViewStartDate: initialViewStartDate,
+                    initialViewEndDate: initialViewEndDate,
+                    calendarViewDirection: calendarViewDirection,
+                    initialShopTimeSlotsResponse: response,
+                    hideSomeDaysForInitialView: hideSomeDaysForInitialView,
+                    hideSecondMonth: hideSecondMonth,
+                    preSelectedDate: config.preSelectedDate,
+                };
+                return initialData;
+            });
+        },
+        async setCalendarData(config = {}) {
+            this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
+            const hideSecondMonth = config.hideSecondMonth;
+            const direction = config.calendarViewDirection;
+            const monthsAfterToLoadOffset = 6;
+            const monthsBeforeToLoadOffset = 36;
+            config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
+                this.selectableDatesData.push(selectableDate);
+            });
+
+            // GENERATE MONTHS AND PUSH THEM INTO ARRAY
+            const months = [];
+            const options = {
+                calendarViewDirection: direction,
+                monthsBeforeToLoadOffset: monthsBeforeToLoadOffset,
+                monthsAfterToLoadOffset: monthsAfterToLoadOffset,
+                initialViewStartDate: config.initialViewStartDate,
+                initialViewEndDate: config.initialViewEndDate,
+                hideSecondMonth: hideSecondMonth,
+                preSelectedDate: config.preSelectedDate,
+            };
+            if (direction === "future") {
+                // first 0, then 1
+                for (let i = 0; i <= monthsAfterToLoadOffset; i++) {
+                    months.push(await this.getMonthData(i, options));
+                }
+            } else if (direction === "past") {
+                // first 0, then -1
+                for (let i = 0; i >= 0 - monthsBeforeToLoadOffset; i--) {
+                    months.unshift(await this.getMonthData(i, options));
+                }
+            } else {
+                // TODO - IF A CALENDAR WITH BOTH PAST AND FUTURE WAS EVER NEEDED
+                // for (let i = monthsAfterToLoadOffset; i >= monthsBeforeToLoadOffset; i--) {
+                //     months.push(this.getMonthDataPAST(i));
+                // }
+            }
+            this.months = months;
+            this.isLoading = false;
+
+            if (config.preSelectedDate) {
+                this.$nextTick(() => {
+                    //Advance to month
+                    const monthToShow = this.months.find((month) =>
+                        month.monthClass.includes("month-preselected")
+                    );
+                    if (
+                        monthToShow.monthClass.includes("month-preselected") &&
+                        monthToShow.monthClass.includes("last-available-month")
+                    ) {
+                        // disable View More dates button if the preSelectedDate in the last available month
+                        this.disableViewMoreDatesButton = true;
+                    }
+                    this.scrollToElement(monthToShow.monthString);
+                });
+            }
+        },
+        async getMonthData(offset = requiredParameter(), options) {
+            /*  options will contain:
+                    calendarViewDirection (string)
+                    initialViewStartDateNum (number)
+                    initialViewEndDateNum (number)
+                    monthsBeforeToLoadOffset (number),
+                    monthsAfterToLoadOffset (number),
+                    hideSecondMonth (boolean),
+                    preSelectedDate (string)
+
+                data used:
+                    todayDate (date object)
+                    this.hideSomeDaysForInitialView (string)
+            */
+
+            let monthNum = convertDateStringToDate(this.todayString).getMonth() + offset + 1;
+            let yearNum = convertDateStringToDate(this.todayString).getFullYear();
+            const calendarViewDirection = options.calendarViewDirection;
+            if (calendarViewDirection === "future" && offset > 0) {
+                while (monthNum > 12) {
+                    monthNum = monthNum - 12;
+                    yearNum++;
+                }
+            } else if (calendarViewDirection === "past" && offset < 0) {
+                while (monthNum < 1) {
+                    monthNum = 12 + monthNum;
+                    yearNum--;
+                }
+            }
+            const initialViewEndDate = options.initialViewEndDate;
+            // const initialViewStartDate = options.initialViewStartDate; // TODO: to be used for past calendarViewDirection
+            const hideSecondMonth = options.hideSecondMonth;
+            const preSelectedDateObj = options.preSelectedDate
+                ? convertDateStringToDate(options.preSelectedDate)
+                : null;
+            const dates = [];
+            const monthEndDate = new Date(yearNum, monthNum, 0);
+            const monthStartDateNum =
+                offset === 0 && calendarViewDirection === "future"
+                    ? this.currentWeekStartDateNum
+                    : 1;
+            const monthStartDate = new Date(yearNum, monthNum - 1, monthStartDateNum);
+            const startDateDayIndex = monthStartDate.getDay();
+
+            let monthClass = "";
+            let isMonthThatHidesSomeDaysForInitialView;
+            let monthEndDateNum = monthEndDate.getDate();
+
+            if (
+                offset === 0 &&
+                calendarViewDirection === "past" &&
+                monthEndDateNum > this.currentWeekEndDateNum
+            ) {
+                monthEndDateNum = this.currentWeekEndDateNum;
+            }
+
+            if (options.preSelectedDate) {
+                if (
+                    monthStartDate.getFullYear() === preSelectedDateObj.getFullYear() &&
+                    monthStartDate.getMonth() === preSelectedDateObj.getMonth()
+                ) {
+                    monthClass = monthClass + " month-preselected";
+                } else if (monthStartDate > preSelectedDateObj) {
+                    monthClass = monthClass + " month-hidden";
+                }
+            } else {
+                if (Math.abs(offset) === 1 && hideSecondMonth) {
+                    monthClass = monthClass + " month-hidden";
+                } else if (Math.abs(offset) > 1) {
+                    monthClass = monthClass + " month-hidden";
+                }
+            }
+
+            if (
+                Math.abs(offset) === options.monthsAfterToLoadOffset &&
+                calendarViewDirection === "future"
+            ) {
+                monthClass = monthClass + " last-available-month";
+            }
+            if (
+                Math.abs(offset) === options.monthsBeforeToLoadOffset &&
+                calendarViewDirection === "past"
+            ) {
+                // TODO - re-check this logic if past direction
+                monthClass = monthClass + " last-available-month";
+            }
+
+            // populate dates array
+            for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
+                let dayClasses = "";
+                const dateString =
+                    yearNum.toString() +
+                    "-" +
+                    ("0" + monthNum).slice(-2) +
+                    "-" +
+                    ("0" + i).slice(-2);
+
+                if (offset === 0 && i === this.todayDateNum) {
+                    dayClasses += " current-day";
+                }
+                if (offset === 0 && i < this.todayDateNum && calendarViewDirection === "future") {
+                    dayClasses += " unavailable-day";
+                }
+                if (offset === 0 && i > this.todayDateNum && calendarViewDirection === "past") {
+                    dayClasses += " unavailable-day";
+                }
+                if (convertDateStringToDate(dateString).getDay() === 0) {
+                    dayClasses += " sunday";
+                }
+                if (
+                    this.hideSomeDaysForInitialView &&
+                    convertDateStringToDate(initialViewEndDate).getMonth() + 1 === monthNum &&
+                    convertDateStringToDate(initialViewEndDate).getDate() < i
+                ) {
+                    dayClasses += " day-hidden";
+                    isMonthThatHidesSomeDaysForInitialView = true;
+                }
+                const dateObject = {
+                    dateNum: i,
+                    dayClasses: dayClasses,
+                    inputValue: dateString,
+                    isSelectable:
+                        this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
+                            ? true
+                            : false,
+                };
+                dates.push(dateObject);
+            }
+
+            const monthToAdd = {
+                monthLabel: MONTHS_OF_YEAR[monthNum - 1],
+                monthIndex: monthNum,
+                monthString: MONTHS_OF_YEAR[monthNum - 1] + "-" + yearNum?.toString(),
+                yearNum: yearNum,
+                dates: dates,
+                startDateDayIndex: startDateDayIndex,
+                monthClass: monthClass,
+                isMonthThatHidesSomeDaysForInitialView: isMonthThatHidesSomeDaysForInitialView,
+            };
+            return monthToAdd;
+        },
+        async showAnotherMonth() {
+            this.isLoading = true;
+            let monthToShow;
+            let monthStartDateNum = 0;
+
+            if (this.hideSomeDaysForInitialView) {
+                monthToShow = this.months.find(
+                    ({ isMonthThatHidesSomeDaysForInitialView }) =>
+                        isMonthThatHidesSomeDaysForInitialView
+                );
+                // find the first day-hidden to become the next api call start date
+                monthStartDateNum =
+                    monthToShow.dates.find(({ dayClasses }) => dayClasses.includes("day-hidden"))
+                        .dateNum - 1;
+            } else {
+                if (this.calendarViewDirection === "future") {
+                    monthToShow = this.months.find((month) =>
+                        month.monthClass.includes("month-hidden")
+                    );
+                }
+                if (this.calendarViewDirection === "past") {
+                    // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
+                    monthToShow = this.months.find((month) =>
+                        month.monthClass.includes("month-hidden")
+                    );
+                }
+            }
+            if (monthToShow) {
+                // make new API call with this month's start and end dates
+                await this.updateSelectableDates(
+                    monthToShow.dates[monthStartDateNum].inputValue,
+                    monthToShow.dates[monthToShow.dates.length - 1].inputValue
+                );
+                this.isLoading = false;
+                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
+                monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
+                this.scrollToElement(monthToShow.monthString);
+
+                if (monthToShow.monthClass.includes("last-available-month"))
+                    this.disableViewMoreDatesButton = true;
+            }
+        },
+        async updateSelectableDates(monthStart, monthEnd) {
+            const moreSelectableDates = await this.customSelectableDatesCallback(
+                monthStart,
+                monthEnd,
+                this.$store.getters.order.serviceLocation.appointmentType,
+                this.$store.getters.order.serviceLocation.provider.providerNumber
+            );
+
+            moreSelectableDates.days.forEach((selectableDate) => {
+                const index = this.selectableDatesData.findIndex(
+                    (dateObj) => dateObj.date === selectableDate.date
+                );
+                if (index === -1) this.selectableDatesData.push(selectableDate);
+                this.months.forEach((month) => {
+                    // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
+                    month.dates.forEach((date) => {
+                        if (date.inputValue === selectableDate.date) {
+                            date["isSelectable"] = true;
+                        }
+                    });
+                });
+            });
+        },
+        scrollToElement(elementId, duration = 800, easing = "ease-in-out") {
+            const wrapper = document.querySelector(".page-container-grouped-styles");
+            const target = document.getElementById(elementId);
+            const initY = wrapper.scrollTop;
+            const wrapperRect = wrapper.getBoundingClientRect();
+            const targetRect = target.getBoundingClientRect();
+            const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
+            const timingFunc = TIMINGFUNC_MAP[easing];
+            let start = null;
+            const step = (timestamp) => {
+                start = start || timestamp;
+                const time = Math.min(1, (timestamp - start) / duration);
+                const percentageNew = timingFunc(time);
+                const distanceToGo = targetY;
+                const thisDistance = percentageNew * distanceToGo;
+                wrapper.scrollTo(0, initY + thisDistance);
+                if (percentageNew < 1) {
+                    window.requestAnimationFrame(step);
+                }
+            };
+            window.requestAnimationFrame(step);
+        },
+    },
+    watch: {
+        modelValue(newValue, oldValue) {
+            this.resetField({
+                value: newValue,
+            });
+        },
+        errorMessage(newValue, oldValue) {
+            // Check for changing from no error message to some error message.
+            if (newValue && !oldValue) {
+                this.scrollToElement("date-of-month-error");
+            }
+        },
+    },
+    components: {
+        loader,
+        ErrorMessage,
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+.date-picker-hidden {
+    opacity: 0;
+    max-height: 0;
+}
+.date-picker {
+    position: relative;
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
+
+    fieldset {
+        flex-grow: 1;
+        position: relative;
+    }
+    .loader {
+        height: 2rem;
+        width: calc(100% - 1.5rem);
+
+        &::after {
+            width: 1.5rem;
+            height: 1.5rem;
+        }
+    }
+    .calendar-grid-container {
+        margin: 0 auto 2rem auto;
+        max-width: 414px;
+        position: relative;
+        transition:
+            height ease 2s,
+            opacity ease 2s;
+        display: grid;
+        grid-template-columns: repeat(7, 1fr);
+        justify-content: center;
+        align-items: center;
+        padding: 0 0.75rem;
+        opacity: 1;
+
+        .grid-item {
+            text-align: center;
+                                                    // margin: 10px 3px;
+                                                    margin: 0;
+            font-size: 0.875rem;
+            line-height: 1.5;
+
+            &.first-day-,
+            &.first-day-0 {
+                grid-column-start: 1;
+            }
+            &.first-day-1 {
+                grid-column-start: 2;
+            }
+            &.first-day-2 {
+                grid-column-start: 3;
+            }
+            &.first-day-3 {
+                grid-column-start: 4;
+            }
+            &.first-day-4 {
+                grid-column-start: 5;
+            }
+            &.first-day-5 {
+                grid-column-start: 6;
+            }
+            &.first-day-6 {
+                grid-column-start: 7;
+            }
+        }
+
+        .separator-line {
+            grid-area: 2/1/2/8;
+            border-top: 1px solid $gray-500;
+            margin: 0.5rem 0;
+        }
+
+        .month-year {
+            grid-area: 1 / 1 / 2 / 5;
+            text-transform: uppercase;
+            font-weight: 300;
+            letter-spacing: 0.75px;
+        }
+        .legend {
+            grid-area: 1 / 5 / 2 / 8;
+            .legend-circle {
+                border-radius: 50%;
+                width: 16px;
+                height: 16px;
+                background-color: $blue-100;
+                border: 1px solid $blue;
+            }
+        }
+        .nav-back,
+        .nav-forward {
+            display: none;
+        }
+
+        .radio-wrapper {
+            position: relative;
+            display: flex;
+            justify-content: center;
+                                                    // align-items: center;
+                                                    align-items: flex-start;
+            outline: none;
+                                                    // height: 1.5rem;
+                                                    width: 100%;
+                                                    height: 2.5rem;
+            opacity: 1;
+            transition: 
+                height ease 250ms,
+                opacity ease 250ms;
+
+                                                    color: $gray-500;
+                                                    background-color: $gray-100;
+
+
+            input[type="radio"] {
+                position: absolute; //override bootstrap
+                height: 0;
+                opacity: 0;
+
+                &:focus-visible + label {
+                    box-shadow: 0 0 0 2.5px $blue;
+                }
+
+                &:focus + label,
+                &:checked:focus + label {
+                    box-shadow:
+                        0 0 0 3px #fff,
+                        0 0 0 5.5px #1574a1;
+                    background-color: $blue;
+                    color: $white;
+                    &.current-day {
+                        &:after {
+                            background-color: $white;
+                        }
+                        .first-day {
+                            color: $white;
+                        }
+                    }
+                }
+
+                &:checked + label {
+                    color: $white;
+                    background: $blue;
+                    &:after {
+                        background-color: $white;
+                    }
+                    .first-day {
+                        color: $white;
+                    }
+                }
+            }
+
+            .first-day {
+                position: absolute;
+                font-size: 9px;
+                font-weight: 500;
+                color: $gray-600;
+                top: 0;
+                z-index: 1;
+            }
+
+            button {
+                width: 2.5rem;
+                font-size: 8px;
+                background: pink;
+            }
+
+            label {
+                position: relative;
+                cursor: pointer;
+                display: flex;
+                                                                    flex-direction: column;
+                justify-content: center;
+                align-items: center;
+                min-width: 2.5rem;
+                                                                    // width: 2.5rem;
+                                                                    // height: 2.5rem;
+                                                                    min-height: 2.5rem;
+                                                                    width: 100%;
+                                                                    font-size: .75rem;
+                                                                    line-height: 1.2;
+                                                                    justify-content: flex-start;
+                                                                    padding: .25rem;
+                                                                    
+
+                span {
+                                                                    margin-top: .25rem;
+                    &.small {
+                        font-size: 0.75rem;
+                        color: $gray-550;
+                    }
+                }
+
+                                                                    // &:hover,
+                &:checked {
+                    @include media-breakpoint-up(sm) {
+                        box-shadow: 0 0 0 4px transparent;
+                        background-color: $blue;
+                        color: $white;
+                        &:after {
+                            background-color: $white;
+                        }
+                    }
+                    cursor: pointer;
+                    &.current-day {
+                        + .first-day {
+                            color: $white;
+                        }
+                    }
+                    .first-day {
+                        color: $white;
+                    }
+                }
+                + p {
+                    display: none;
+                }
+            }
+
+            &.selectable-day {
+                                                        background-color: $white;
+                label {
+                    color: $blue;
+                                                        // background-color: $blue-100;
+                                                        // border: 1px solid $blue;
+                                                        // min-width: 2.5rem;
+                                                        // width: 2.5rem;
+                                                        // border-radius: 50%;
+
+                                                        span {
+                                                            // text-underline-offset: 4px;
+                                                            text-decoration: underline;
+                                                        }
+
+                }
+            }
+            // &.unavailable-day {
+            //     label {
+            //         color: $gray-500;
+            //         background-color: $gray-100;
+            //         border: none;
+            //         pointer-events: none;
+            //     }
+            // }
+            &.unavailable-day:not(&.sunday) {
+                label {
+                    &::before {
+                        content: "";
+                        display: inline-block;
+                        position: absolute;
+                        left: -1rem;
+                        width: 1rem;
+                        height: 2.5rem;
+                        background: $gray-100;
+                    }
+                }
+            }
+            &.current-day {
+                label {
+                    font-weight: 500;
+                    color: $black;
+
+                    &:after {
+                        content: "";
+                                                            margin-top: .2rem;
+                        width: 0.25rem;
+                        height: 0.25rem;
+                        border-radius: 50%;
+                        background-color: $black;
+                                                            // position: absolute;
+                                                            // top: 28px;
+                    }
+                    .first-day {
+                        color: $blue;
+                    }
+                }
+            }
+        }
+
+        &.partial-month-initial-view {
+            .day-hidden {
+                opacity: 0;
+                overflow: hidden;
+                display: flex;
+                margin: 0;
+                max-height: 0;
+            }
+        }
+        &.month-hidden {
+            opacity: 0;
+            max-height: 0;
+            margin-bottom: 0;
+            overflow: hidden;
+        }
+    }
+
+    .btn-link {
+        font-weight: 500;
+        text-underline-offset: 4px;
+        flex-grow: 0;
+        &:focus {
+            box-shadow: none;
+        }
+    }
+
+    .past {
+        .calendar-grid-container {
+            .month-year {
+                grid-area: 1 / 1 / 2 / 6;
+            }
+            .nav-forward {
+                grid-area: 1 / 7 / 2 / 8;
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        width: 7px;
+                        height: 12px;
+                        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.66831 5.99879C6.66955 6.17554 6.60074 6.34558 6.47695 6.47168L1.15501 11.8017C1.02812 11.9287 0.85603 12 0.676587 12C0.497145 12 0.325053 11.9287 0.198168 11.8017C0.0712831 11.6748 7.268e-09 11.5026 8.07183e-09 11.3231C8.87567e-09 11.1436 0.0712831 10.9714 0.198168 10.8445L5.05126 5.99879L0.198168 1.14736C0.0725521 1.02042 0.00248585 0.848755 0.00338306 0.670131C0.00428028 0.491506 0.0760674 0.320554 0.202952 0.194881C0.329837 0.0692091 0.501426 -0.000888818 0.679971 9.54485e-06C0.858515 0.000906955 1.02939 0.0727263 1.15501 0.199668L6.47312 5.52399C6.59843 5.65017 6.66862 5.82092 6.66831 5.99879Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+                    }
+                }
+            }
+            .nav-back {
+                grid-area: 1 / 6 / 2 / 7;
+                display: flex;
+                justify-content: flex-end;
+                button {
+                    &:after {
+                        content: "";
+                        position: absolute;
+                        width: 7px;
+                        height: 12px;
+                        background-image: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.331685 6.00121C0.330445 5.82446 0.399256 5.65442 0.523053 5.52832L5.84499 0.198256C5.97188 0.0713149 6.14397 -8.63821e-08 6.32341 -6.72174e-08C6.50285 -4.80527e-08 6.67495 0.071315 6.80183 0.198256C6.92872 0.325198 7 0.497368 7 0.67689C7 0.856412 6.92872 1.02858 6.80183 1.15552L1.94874 6.00121L6.80183 10.8526C6.92745 10.9796 6.99751 11.1512 6.99662 11.3299C6.99572 11.5085 6.92393 11.6794 6.79705 11.8051C6.67016 11.9308 6.49857 12.0009 6.32003 12C6.14148 11.9991 5.97061 11.9273 5.84499 11.8003L0.526881 6.47601C0.401568 6.34983 0.331375 6.17908 0.331685 6.00121Z' fill='%231574A1'/%3E%3C/svg%3E%0A");
+                    }
+                }
+            }
+            .nav-back,
+            .nav-forward {
+                button {
+                    position: relative;
+                    border-radius: 50%;
+                    width: 28px;
+                    height: 28px;
+                    background-color: $blue-100;
+                    border: 1px solid $blue;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    &:focus,
+                    &:focus-visible {
+                        border: 2.5px solid $blue;
+                        box-shadow: none;
+                        background-color: $blue-100;
+                        color: $white;
+                    }
+                }
+            }
+        }
+    }
+}
+.btn-link {
+    display: block;
+    position: relative;
+    height: 2rem;
+    width: 100%;
+    justify-content: center;
+    background: transparent;
+    border: none;
+    font-weight: 500;
+    text-underline-offset: 4px;
+    z-index: 2;
+}
+
+.form-test-error {
+    margin: 0 auto;
+    max-width: 414px;
+    text-align: left;
+}
+</style>
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 7800876cd..6c06cf727 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -10,6 +10,7 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
+                    selectedDate: {{ selectedDate }}
                     <template v-if="ChangeShopLink.length">
                         <textBlock
                             cmsWidgetName="ChangeShopLink"
@@ -18,7 +19,7 @@
                             marginTopSizeOverride="1" />
                     </template>
                     <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                    <datePicker
+                    <datePicker2
                         customComponentId="dateQuestion"
                         selectableDatesSetting="custom"
                         ref="datePicker"
@@ -69,7 +70,7 @@ import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import { Form, defineRule } from "vee-validate";
-import datePicker from "@/digital-components/date-picker/date-picker";
+import datePicker2 from "@/digital-components/date-picker/date-picker-2";
 import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
 import timeSlotModalQuestion from "./time-slot-modal-question/time-slot-modal-question";
 import textBlock from "@/digital-components/text-block/text-block";
@@ -213,7 +214,7 @@ export default {
             preSelectedDate = null;
         }
 
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+        const datePickerInitialDataPromise = await datePicker2.methods.loadInitialData({
             // setup config options for date-picker
             selectableDatesSetting: "custom",
             initialViewRowsToShow: 5,
@@ -537,7 +538,7 @@ export default {
         funnelSubHeader,
         Form,
         loadingModal,
-        datePicker,
+        datePicker2,
         locationAlerts,
         timeSlotModalQuestion,
         textBlock,

From e201944b7726d7b278b7ccdd9a0881b259538040 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 13 Feb 2025 19:33:12 -0500
Subject: [PATCH 02/13] CASH-153 - new styling

---
 .../date-picker/date-picker-2.vue             | 92 +++++--------------
 1 file changed, 24 insertions(+), 68 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker-2.vue b/src/digital-components/date-picker/date-picker-2.vue
index a1af80723..7a0f4e0cf 100644
--- a/src/digital-components/date-picker/date-picker-2.vue
+++ b/src/digital-components/date-picker/date-picker-2.vue
@@ -750,8 +750,7 @@ export default {
 
         .grid-item {
             text-align: center;
-                                                    // margin: 10px 3px;
-                                                    margin: 0;
+            margin: 0;
             font-size: 0.875rem;
             line-height: 1.5;
 
@@ -810,50 +809,27 @@ export default {
             position: relative;
             display: flex;
             justify-content: center;
-                                                    // align-items: center;
-                                                    align-items: flex-start;
+            align-items: flex-start;
             outline: none;
-                                                    // height: 1.5rem;
-                                                    width: 100%;
-                                                    height: 2.5rem;
+            width: 100%;
             opacity: 1;
-            transition: 
+            transition:
                 height ease 250ms,
                 opacity ease 250ms;
 
-                                                    color: $gray-500;
-                                                    background-color: $gray-100;
-
+            color: $gray-500;
+            background-color: $gray-100;
 
             input[type="radio"] {
                 position: absolute; //override bootstrap
                 height: 0;
                 opacity: 0;
 
-                &:focus-visible + label {
-                    box-shadow: 0 0 0 2.5px $blue;
-                }
-
-                &:focus + label,
-                &:checked:focus + label {
-                    box-shadow:
-                        0 0 0 3px #fff,
-                        0 0 0 5.5px #1574a1;
-                    background-color: $blue;
-                    color: $white;
-                    &.current-day {
-                        &:after {
-                            background-color: $white;
-                        }
-                        .first-day {
-                            color: $white;
-                        }
-                    }
-                }
-
                 &:checked + label {
-                    color: $white;
-                    background: $blue;
+                    background: $blue-100;
+                    border: 2px solid $blue;
+                    border-radius: 4px;
+
                     &:after {
                         background-color: $white;
                     }
@@ -882,29 +858,25 @@ export default {
                 position: relative;
                 cursor: pointer;
                 display: flex;
-                                                                    flex-direction: column;
+                flex-direction: column;
                 justify-content: center;
                 align-items: center;
                 min-width: 2.5rem;
-                                                                    // width: 2.5rem;
-                                                                    // height: 2.5rem;
-                                                                    min-height: 2.5rem;
-                                                                    width: 100%;
-                                                                    font-size: .75rem;
-                                                                    line-height: 1.2;
-                                                                    justify-content: flex-start;
-                                                                    padding: .25rem;
-                                                                    
+                height: 3rem;
+                width: 100%;
+                font-size: 0.75rem;
+                line-height: 1.2;
+                justify-content: flex-start;
+                padding: 0.25rem;
 
                 span {
-                                                                    margin-top: .25rem;
+                    margin-top: 0.25rem;
                     &.small {
                         font-size: 0.75rem;
                         color: $gray-550;
                     }
                 }
 
-                                                                    // &:hover,
                 &:checked {
                     @include media-breakpoint-up(sm) {
                         box-shadow: 0 0 0 4px transparent;
@@ -930,30 +902,16 @@ export default {
             }
 
             &.selectable-day {
-                                                        background-color: $white;
+                background-color: $white;
                 label {
                     color: $blue;
-                                                        // background-color: $blue-100;
-                                                        // border: 1px solid $blue;
-                                                        // min-width: 2.5rem;
-                                                        // width: 2.5rem;
-                                                        // border-radius: 50%;
-
-                                                        span {
-                                                            // text-underline-offset: 4px;
-                                                            text-decoration: underline;
-                                                        }
 
+                    span {
+                        text-decoration: underline;
+                    }
                 }
             }
-            // &.unavailable-day {
-            //     label {
-            //         color: $gray-500;
-            //         background-color: $gray-100;
-            //         border: none;
-            //         pointer-events: none;
-            //     }
-            // }
+
             &.unavailable-day:not(&.sunday) {
                 label {
                     &::before {
@@ -974,13 +932,11 @@ export default {
 
                     &:after {
                         content: "";
-                                                            margin-top: .2rem;
+                        margin-top: 0.2rem;
                         width: 0.25rem;
                         height: 0.25rem;
                         border-radius: 50%;
                         background-color: $black;
-                                                            // position: absolute;
-                                                            // top: 28px;
                     }
                     .first-day {
                         color: $blue;

From 881ad6345824e0969f15ada65a98522a171572b4 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Thu, 13 Feb 2025 19:46:26 -0500
Subject: [PATCH 03/13] CASH-153 - cleanup and more css tweaks

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

diff --git a/src/digital-components/date-picker/date-picker-2.vue b/src/digital-components/date-picker/date-picker-2.vue
index 7a0f4e0cf..50ea6f0fb 100644
--- a/src/digital-components/date-picker/date-picker-2.vue
+++ b/src/digital-components/date-picker/date-picker-2.vue
@@ -39,7 +39,6 @@
                         date.dayClasses,
                         date.isSelectable ? 'selectable-day' : '',
                     ]">
-                    <!-- <h3>{{ date.inputValue }}</h3> -->
                     <input
                         :disabled="!date.isSelectable"
                         type="radio"
@@ -785,12 +784,13 @@ export default {
         }
 
         .month-year {
-            grid-area: 1 / 1 / 2 / 5;
+            grid-area: 1 / 1 / 2 / 8;
             text-transform: uppercase;
             font-weight: 300;
             letter-spacing: 0.75px;
         }
         .legend {
+            display: none;
             grid-area: 1 / 5 / 2 / 8;
             .legend-circle {
                 border-radius: 50%;
@@ -856,7 +856,6 @@ export default {
 
             label {
                 position: relative;
-                cursor: pointer;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
@@ -905,6 +904,7 @@ export default {
                 background-color: $white;
                 label {
                     color: $blue;
+                    cursor: pointer;
 
                     span {
                         text-decoration: underline;
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 6c06cf727..63a2d7d64 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -10,7 +10,6 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
-                    selectedDate: {{ selectedDate }}
                     <template v-if="ChangeShopLink.length">
                         <textBlock
                             cmsWidgetName="ChangeShopLink"

From 4452f718d0356054e1366363017ad8fe7113d009 Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Fri, 14 Feb 2025 15:13:26 -0500
Subject: [PATCH 04/13] CASH-256

CASH-256 prettier config change and prevent email and phone getting cleared when navigating back from payment to service-zip.
---
 .prettierrc                                   |  1 +
 .../date-picker/date-picker-2.vue             | 38 +++++++++++++++----
 .../date-picker/date-picker.vue               | 38 +++++++++++++++----
 .../textarea-question/textarea-question.vue   |  3 +-
 .../textbox-question/textbox-question.vue     |  6 +--
 src/fmg-components/cart/cart.vue              | 30 +++++++--------
 .../promo-modal-question.vue                  |  6 ++-
 .../add-to-calendar/add-to-calendar.vue       |  7 ++--
 .../insurance-company/insurance-company.vue   | 12 ++++--
 src/layouts/part-questions/part-questions.vue |  2 +-
 .../payment-method-list-button.vue            |  2 +-
 .../payment-switch-button.vue                 |  2 +-
 src/layouts/payment/payment.vue               |  3 +-
 src/layouts/quote/quote.spec.js               |  6 +--
 .../recal-disclaimer/recal-disclaimer.vue     |  2 +-
 src/layouts/return-user/return-user.vue       |  7 ++--
 .../service-zip-modal-question.vue            |  2 +-
 .../shop-list-button/shop-list-button.vue     | 18 ++++-----
 src/layouts/service-zip/service-zip.vue       |  3 +-
 src/store/index.js                            |  8 +++-
 src/ux-components/text-link/text-link.vue     | 28 ++++++++------
 21 files changed, 138 insertions(+), 86 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index 192cad794..514fb6eac 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,5 +1,6 @@
 {
     "tabWidth": 4,
+    "htmlWhitespaceSensitivity": "ignore",
     "bracketSameLine": true,
     "printWidth": 100,
     "trailingComma" : "es5"
diff --git a/src/digital-components/date-picker/date-picker-2.vue b/src/digital-components/date-picker/date-picker-2.vue
index 50ea6f0fb..8becf6266 100644
--- a/src/digital-components/date-picker/date-picker-2.vue
+++ b/src/digital-components/date-picker/date-picker-2.vue
@@ -17,18 +17,40 @@
                 <div
                     v-if="calendarViewDirection === 'future'"
                     class="legend caption d-flex align-items-center justify-content-end">
-                    <span class="legend-circle me-1"></span> &equals; Available
+                    <span class="legend-circle me-1"></span>
+                    &equals; Available
                 </div>
                 <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
-                <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
-                <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
-                <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Sunday</span>
+                    S
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Monday</span>
+                    M
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Tuesday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Wednesday</span>
+                    W
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Thursday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Friday</span>
+                    F
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Saturday</span>
+                    S
+                </div>
                 <div
                     v-for="date in month.dates"
                     :key="date.inputValue"
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index c345a1ce3..71c09bbbf 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -17,18 +17,40 @@
                 <div
                     v-if="calendarViewDirection === 'future'"
                     class="legend caption d-flex align-items-center justify-content-end">
-                    <span class="legend-circle me-1"></span> &equals; Available
+                    <span class="legend-circle me-1"></span>
+                    &equals; Available
                 </div>
                 <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
-                <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
-                <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
-                <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Sunday</span>
+                    S
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Monday</span>
+                    M
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Tuesday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Wednesday</span>
+                    W
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Thursday</span>
+                    T
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Friday</span>
+                    F
+                </div>
+                <div class="grid-item caption">
+                    <span class="sr-only">Saturday</span>
+                    S
+                </div>
                 <div
                     v-for="date in month.dates"
                     :key="date.inputValue"
diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue
index c70dae7f4..3e13769e6 100644
--- a/src/digital-components/textarea-question/textarea-question.vue
+++ b/src/digital-components/textarea-question/textarea-question.vue
@@ -16,8 +16,7 @@
                 :maxlength="maxLength"
                 role="textbox"
                 aria-multiline="true"
-                :aria-required="isRequired">
-            </textarea>
+                :aria-required="isRequired"></textarea>
             <p
                 tabindex="-1"
                 class="caption mt-2 mb-0 w-100"
diff --git a/src/digital-components/textbox-question/textbox-question.vue b/src/digital-components/textbox-question/textbox-question.vue
index 15fb89a8b..4eb81ab0b 100644
--- a/src/digital-components/textbox-question/textbox-question.vue
+++ b/src/digital-components/textbox-question/textbox-question.vue
@@ -75,9 +75,9 @@
                 class="d-inline-flex small mt-1"
                 aria-atomic="true"
                 aria-live="polite"
-                :class="[centerErrorMessage ? 'center-error-message' : '']"
-                >{{ errorMessage }}</span
-            >
+                :class="[centerErrorMessage ? 'center-error-message' : '']">
+                {{ errorMessage }}
+            </span>
         </div>
     </div>
 </template>
diff --git a/src/fmg-components/cart/cart.vue b/src/fmg-components/cart/cart.vue
index e21a5037a..c4a8e4900 100644
--- a/src/fmg-components/cart/cart.vue
+++ b/src/fmg-components/cart/cart.vue
@@ -10,9 +10,9 @@
                     href="javascript:void(0)"
                     class="col d-flex justify-content-between py-0">
                     <span class="label">{{ OrderDetailsText }}</span>
-                    <span class="label amount-due">{{
-                        getLineItemAmount(amountDue, showCoverageAsPending)
-                    }}</span>
+                    <span class="label amount-due">
+                        {{ getLineItemAmount(amountDue, showCoverageAsPending) }}
+                    </span>
                 </a>
             </div>
             <div class="cart-panel">
@@ -48,11 +48,11 @@
                         v-for="(cartItem, i) in packageCartItems"
                         :key="i"
                         class="packaged-cart-item">
-                        <span
-                            ><span :class="cartItem.category === 'promos' ? 'promo' : ''">{{
-                                cartItem.name
-                            }}</span></span
-                        >
+                        <span>
+                            <span :class="cartItem.category === 'promos' ? 'promo' : ''">
+                                {{ cartItem.name }}
+                            </span>
+                        </span>
                         <textLink
                             v-if="allowItemRemoval"
                             ref="removeLink"
@@ -99,11 +99,9 @@
                                 !showCoverageAsVerified ||
                                 cartItem.name === 'Recycling' ||
                                 (showCoverageAsVerified && !cartItem.isCoveredByInsurance)
-                            "
-                            >{{
-                                getLineItemAmount(cartItem.subTotal, null, cartItem.category)
-                            }}</span
-                        >
+                            ">
+                            {{ getLineItemAmount(cartItem.subTotal, null, cartItem.category) }}
+                        </span>
                     </div>
 
                     <!-- Sub total, sales tax, total columns -->
@@ -143,8 +141,10 @@
             class="my-2 lh-1 applied-promo-tag"
             v-for="(promoCode, i) in getPromoCodeList"
             :key="i">
-            <span class="caption"
-                >Promo code <span class="promo-code">{{ promoCode }}</span> applied
+            <span class="caption">
+                Promo code
+                <span class="promo-code">{{ promoCode }}</span>
+                applied
             </span>
         </div>
         <contentGroupModal ref="RecycleModal" cmsWidgetName="RecycleModal">
diff --git a/src/fmg-components/promo-modal-question/promo-modal-question.vue b/src/fmg-components/promo-modal-question/promo-modal-question.vue
index 656aeaa38..8efad6f3e 100644
--- a/src/fmg-components/promo-modal-question/promo-modal-question.vue
+++ b/src/fmg-components/promo-modal-question/promo-modal-question.vue
@@ -54,8 +54,10 @@
                 class="mt-4 d-flex align-items-center justify-content-between"
                 v-for="(promoCode, i) in this.getPromoCodeList()"
                 :key="i">
-                <span class="applied-promo"
-                    >Promo code <span class="promo-code">{{ promoCode }}</span> applied
+                <span class="applied-promo">
+                    Promo code
+                    <span class="promo-code">{{ promoCode }}</span>
+                    applied
                 </span>
                 <textLink
                     ref="removeLink"
diff --git a/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue b/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue
index c2cb5ea00..1fef02247 100644
--- a/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue
+++ b/src/layouts/confirmation/add-to-calendar/add-to-calendar.vue
@@ -4,8 +4,8 @@
             <button v-on:click="openCalendarModal">
                 <span class="add-to-calendar-span">
                     <img src="@/assets/img/icons/add-to-calendar.svg" class="add-to-calendar-img" />
-                    <span class="add-to-calendar-text">Add to calendar</span></span
-                >
+                    <span class="add-to-calendar-text">Add to calendar</span>
+                </span>
             </button>
         </div>
         <calendarModalQuestion
@@ -14,8 +14,7 @@
             cmsWidgetName="CalendarModalQuestion"
             @calendar-modal-closed="calendarModalClosed"
             :calendarOptionsData="calendarValues"
-            v-model="selectedCalendarOption">
-        </calendarModalQuestion>
+            v-model="selectedCalendarOption"></calendarModalQuestion>
     </div>
 </template>
 <script>
diff --git a/src/layouts/insurance-company/insurance-company.vue b/src/layouts/insurance-company/insurance-company.vue
index 452484e48..6069d2de5 100644
--- a/src/layouts/insurance-company/insurance-company.vue
+++ b/src/layouts/insurance-company/insurance-company.vue
@@ -22,7 +22,7 @@
                         linkType="text"
                         :text="payWithCashButtonCopy"
                         href="javascript:void(0)"
-                        @click-event="backButtonAction(foreceCashSelectionOnQuote = true)" />
+                        @click-event="backButtonAction((foreceCashSelectionOnQuote = true))" />
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -102,7 +102,7 @@ export default {
         },
         payWithCashButtonCopy() {
             return this.getCmsContent("PayWithCashWidget", "Text");
-        }
+        },
     },
     methods: {
         isCashParentAccountNumber() {
@@ -123,10 +123,14 @@ export default {
         backButtonAction(forceCashSelectionOnQuote) {
             // Go back to Quote page
             if (forceCashSelectionOnQuote) {
-                this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route, {"isCashSelected": true});
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.$route,
+                    { isCashSelected: true }
+                );
                 return;
             }
-                
+
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
         },
         async forwardButtonAction() {
diff --git a/src/layouts/part-questions/part-questions.vue b/src/layouts/part-questions/part-questions.vue
index d60ddbb70..1d7771474 100644
--- a/src/layouts/part-questions/part-questions.vue
+++ b/src/layouts/part-questions/part-questions.vue
@@ -93,7 +93,7 @@ export default {
                         false
                     );
                 }
-                
+
                 baseMixin.methods.ResetExternalParamsAndHideModal();
             }
         });
diff --git a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
index 2763f1af9..406e9055a 100644
--- a/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
+++ b/src/layouts/payment-method/payment-method-question/payment-method-list-button/payment-method-list-button.vue
@@ -18,7 +18,7 @@
                                 v-if="hasImage"
                                 :src="buttonImage"
                                 :alt="getInlineAltText(token)" />
-                            <span v-else> {{ getInlineAltText(token) }}</span>
+                            <span v-else>{{ getInlineAltText(token) }}</span>
                         </span>
                         <span v-else>
                             {{ token }}
diff --git a/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue b/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue
index 7199e27e7..af221c7ba 100644
--- a/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue
+++ b/src/layouts/payment/payment-switch/payment-switch-button/payment-switch-button.vue
@@ -11,7 +11,7 @@
                     class="ms-2"
                     :src="buttonImage"
                     :alt="getInlineAltText(token)" />
-                <span v-else> {{ getInlineAltText(token) }}</span>
+                <span v-else>{{ getInlineAltText(token) }}</span>
             </span>
             <span v-else>
                 {{ token }}
diff --git a/src/layouts/payment/payment.vue b/src/layouts/payment/payment.vue
index 5ffb04faa..ecd2489c8 100644
--- a/src/layouts/payment/payment.vue
+++ b/src/layouts/payment/payment.vue
@@ -41,8 +41,7 @@
                             id="card-frame"
                             seamless
                             scrolling="no"
-                            allow="payment *; microphone *; geolocation *;">
-                        </iframe>
+                            allow="payment *; microphone *; geolocation *;"></iframe>
                     </div>
 
                     <hr />
diff --git a/src/layouts/quote/quote.spec.js b/src/layouts/quote/quote.spec.js
index 522bc4f2e..a46bc3327 100644
--- a/src/layouts/quote/quote.spec.js
+++ b/src/layouts/quote/quote.spec.js
@@ -612,14 +612,10 @@ describe("quote.vue", () => {
         mockTierOnePrice = 505;
         const { wrapper } = setupMocks({});
 
-
         //Act
         await quote.beforeRouteEnter.call(
             wrapper.vm,
-            { query: { fmgPage: "quote",
-                isInsuranceSelected: true,
-                isCashSelected: true,
-             } },
+            { query: { fmgPage: "quote", isInsuranceSelected: true, isCashSelected: true } },
             undefined,
             (c) => c(wrapper.vm)
         );
diff --git a/src/layouts/quote/recal-disclaimer/recal-disclaimer.vue b/src/layouts/quote/recal-disclaimer/recal-disclaimer.vue
index c7f31db33..b1e0e10e2 100644
--- a/src/layouts/quote/recal-disclaimer/recal-disclaimer.vue
+++ b/src/layouts/quote/recal-disclaimer/recal-disclaimer.vue
@@ -3,7 +3,7 @@
         <div class="alert-heading">
             <span>
                 <img v-if="hasImage" :src="imageUrl" />
-                <span class="px-2"> {{ recalHeaderText }}</span>
+                <span class="px-2">{{ recalHeaderText }}</span>
             </span>
         </div>
         <div>
diff --git a/src/layouts/return-user/return-user.vue b/src/layouts/return-user/return-user.vue
index adf55ce2b..d655a0c14 100644
--- a/src/layouts/return-user/return-user.vue
+++ b/src/layouts/return-user/return-user.vue
@@ -27,9 +27,10 @@
                 </div>
                 <div class="row justify-content-center">
                     <div class="col-md-6 col-xl-4 start-over">
-                        <a @click="startOver" alt="Start Over Button"
-                            ><img v-bind:src="startOverImage" />{{ startOverText }}</a
-                        >
+                        <a @click="startOver" alt="Start Over Button">
+                            <img v-bind:src="startOverImage" />
+                            {{ startOverText }}
+                        </a>
                     </div>
                 </div>
             </div>
diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
index c0231ea80..24d063e5e 100644
--- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
+++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue
@@ -8,7 +8,7 @@
                 href="#!"
                 @click-event="openModal">
                 <template v-slot:after-text v-if="editScreenReaderTextCmsWidgetName">
-                    <span class="sr-only"> {{ screenReaderOnlyText }} </span>
+                    <span class="sr-only">{{ screenReaderOnlyText }}</span>
                 </template>
             </textLink>
         </div>
diff --git a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
index 381ff4607..e46b02a96 100644
--- a/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
+++ b/src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue
@@ -8,12 +8,12 @@
                 :aria-label="buttonLabel"
                 class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
                 <div class="row-one">
-                    <span class="m-0 button-label-copy text-truncate" :class="textPosition">{{
-                        buttonLabel
-                    }}</span>
-                    <span class="m-0 caption mx-1 text-nowrap" :class="textPosition">{{
-                        buttonLabelSubCopy
-                    }}</span>
+                    <span class="m-0 button-label-copy text-truncate" :class="textPosition">
+                        {{ buttonLabel }}
+                    </span>
+                    <span class="m-0 caption mx-1 text-nowrap" :class="textPosition">
+                        {{ buttonLabelSubCopy }}
+                    </span>
                     <div
                         v-if="displayAvailabilityIndicators"
                         class="availability-indicator rounded-pill text-nowrap"
@@ -22,9 +22,9 @@
                             v-if="!isLoaderDisplayed"
                             class="availability-badge"
                             :class="availabilityRating == 'high' ? 'green' : 'orange'"></div>
-                        <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">{{
-                            badgeText
-                        }}</span>
+                        <span v-if="!isLoaderDisplayed" class="m-0 button-auxillary-copy">
+                            {{ badgeText }}
+                        </span>
                         <loader
                             v-if="isLoaderDisplayed"
                             :loaderPosition="left"
diff --git a/src/layouts/service-zip/service-zip.vue b/src/layouts/service-zip/service-zip.vue
index ae7609da8..9528d50bc 100644
--- a/src/layouts/service-zip/service-zip.vue
+++ b/src/layouts/service-zip/service-zip.vue
@@ -206,8 +206,7 @@ export default {
             if (!this.emailOrSms) {
                 await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, "", false);
                 await this.dispatchStoreAction(storeActions.SAVE_EMAIL, "", false);
-            }
-            else { 
+            } else {
                 if (vinPagesMixin.methods.isPhoneNumber(this.emailOrSms)) {
                     const phone = this.emailOrSms.replace(/[()]/g, "");
                     await this.dispatchStoreAction(storeActions.SAVE_PHONE_NUMBER, phone, false);
diff --git a/src/store/index.js b/src/store/index.js
index 64b28415c..03e8f339a 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1016,8 +1016,12 @@ export const getters = {
             return email;
         }
 
-        // if we're here, then we have both email and phone so get the value from pageData to reflect what they entered on the page
-        return state.applicationUser.pageData[fmgPageValues.EMAIL_SMS_PAGES]?.emailOrSmsValue;
+        // if we're here, then we have both email and phone so get the value from pageData to reflect what they entered on the page.
+        // if they didn't enter anything on the page default to email
+        return (
+            state.applicationUser.pageData[fmgPageValues.EMAIL_SMS_PAGES]?.emailOrSmsValue ??
+            state.order.customer.emailAddress
+        );
     },
 };
 
diff --git a/src/ux-components/text-link/text-link.vue b/src/ux-components/text-link/text-link.vue
index 7fc4eaef8..30cd2d7e5 100644
--- a/src/ux-components/text-link/text-link.vue
+++ b/src/ux-components/text-link/text-link.vue
@@ -1,22 +1,26 @@
 <template>
     <loadingModal v-if="useLoadingModal" notFullScreen ref="loadingModal" />
-    <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
+    <a v-if="linkType === 'navigation'" @click="handleClick" class="navigation-link" :href="href">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
     <a
         v-else-if="linkType === 'newWindowLink'"
         @click="handleClick"
         class="new-window-link"
         :href="href"
-        target="_blank"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
-    <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
-    <a v-else-if="linkType === 'text'" @click="handleClick" :href="href"
-        >{{ text }}<slot name="after-text"></slot
-    ></a>
+        target="_blank">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
+    <a v-else-if="linkType === 'textSmall'" @click="handleClick" class="small" :href="href">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
+    <a v-else-if="linkType === 'text'" @click="handleClick" :href="href">
+        {{ text }}
+        <slot name="after-text"></slot>
+    </a>
 </template>
 
 <script>

From 8123cae1a2205278aaa3ec615ee800692ca1e66b Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Sun, 16 Feb 2025 14:10:13 -0500
Subject: [PATCH 05/13] CASH-151

CASH-151 add 'as low as' to quote page.
used an experiment version of service-package-radio
---
 src/constants/experiments.js                  |   1 +
 .../button-question/button-question.vue       |   2 +
 .../service-package-radio.vue                 | 455 ++++++++++++++++++
 src/layouts/quote/quote.vue                   |   3 +-
 .../service-package-question.vue              |  15 +-
 5 files changed, 472 insertions(+), 4 deletions(-)
 create mode 100644 src/experiment-components/service-package-radio.vue

diff --git a/src/constants/experiments.js b/src/constants/experiments.js
index 92d27a4a1..696707827 100644
--- a/src/constants/experiments.js
+++ b/src/constants/experiments.js
@@ -18,6 +18,7 @@ const experimentSettings = {
     INSURANCE_TAB_TO_DISPLAY_THRESHOLD_INTERNAL: "NextGen_InternalInsuranceTabDisplayThreshold",
     INSURANCE_TAB_TO_DISPLAY_THRESHOLD_EXTERNAL: "NextGen_ExternalInsuranceTabDisplayThreshold",
     DISPLAY_MSR: "DisplayMSR",
+    PRICING_BY_DAY: "DisplayPricingByDay",
 };
 
 const experimentTriggers = {
diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index f9c1b6279..53f71eb9b 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -55,6 +55,7 @@ https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Com
                             :additionalButtonData="answer.additionalButtonData"
                             :lastValuePushedToGa="lastValuePushedToGa"
                             :setLastValuePushedToGa="setLastValuePushedToGa"
+                            :isInsuranceSelected="isInsuranceSelected"
                             :suppressError="suppressError"
                             @buttonEvent="handleButtonEvent"
                             v-model="selectedValues" />
@@ -139,6 +140,7 @@ export default {
             type: Boolean,
             default: false,
         },
+        isInsuranceSelected: Boolean,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
diff --git a/src/experiment-components/service-package-radio.vue b/src/experiment-components/service-package-radio.vue
new file mode 100644
index 000000000..c17ccdc9e
--- /dev/null
+++ b/src/experiment-components/service-package-radio.vue
@@ -0,0 +1,455 @@
+<template>
+    <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
+        <div
+            class="package-label"
+            :class="[this.buttonLabelSubCopy ? 'has-subheader' : '',
+                this.isInsuranceSelected ? 'pricing-by-day-pkg-lbl-ins' : 'pricing-by-day-pkg-lbl']"
+            for="testradio">
+            <div class="package-specs">
+                <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
+                    <div class="col md-6">
+                        <p class="m-0">
+                            <span v-html="this.buttonLabel"></span>
+                        </p>
+                        <p
+                            class="sub-label m-0"
+                            v-if="this.buttonLabelSubCopy"
+                            v-html="this.buttonLabelSubCopy"></p>
+                    </div>
+                    <span class="col md-6 service-package-discount-pricing-by-day">
+                        <div>
+                            <span v-if="!isInsuranceSelected" class="caption pricing-by-day">as low as</span>
+                            <div class="strikethrough-discount-price"
+                                v-if="shouldDisplayStrikeThroughPrice"
+                                v-html="this.additionalButtonData.strikeThroughPrice"></div>
+                            <div class="discount-price" v-html="getDisplayPrice"></div>
+                        </div>
+                    </span>
+                </div>
+                <div v-else>
+                    <p class="m-0">
+                        <span v-html="this.buttonLabel"></span>
+                        <span class="pricing-info-pricing-by-day">
+                            <span v-if="!isInsuranceSelected" class="caption pricing-by-day">as low as</span>
+                            <span
+                                class="strikethrough-price"
+                                v-if="shouldDisplayStrikeThroughPrice"
+                                v-html="this.additionalButtonData.strikeThroughPrice"></span>
+                            <span v-html="getDisplayPrice"></span>
+                        </span>
+                    </p>
+                    <p
+                        class="sub-label m-0"
+                        v-if="this.buttonLabelSubCopy"
+                        v-html="this.buttonLabelSubCopy"></p>
+                </div>
+                <div class="hide-when-closed">
+                    <!-- Parse the body text containing <ul> with logic -->
+                    <ul>
+                        <li v-for="listItem in this.arrayOfListItemsFromBodyText" :key="listItem">
+                            <!-- no textLink -->
+                            <span
+                                v-if="!doesCopyContainTextLink(listItem)"
+                                v-html="listItem"></span>
+                            <!-- with textLink -->
+                            <template
+                                v-else
+                                v-for="copy in splitCopyOnCMSPlaceHolder(listItem)"
+                                :key="copy">
+                                <span v-if="!doesCopyContainTextLink(copy)" v-html="copy"></span>
+                                <span v-else>
+                                    <textLink
+                                        linkType="text"
+                                        :text="getRouterLinkDisplayTextFromCopy(copy)"
+                                        href="#!"
+                                        @click-event="
+                                            $emit('buttonEvent', {
+                                                eventName: 'openModal',
+                                                args: getRouterLinkRouteFromCopy(copy),
+                                            })
+                                        "
+                                        :data-bs-target="'#' + getRouterLinkRouteFromCopy(copy)" />
+                                </span>
+                            </template>
+                        </li>
+                    </ul>
+                    <!-- End of body text parsing -->
+                    <div
+                        class="package-footer fw-bold caption ms-n4 mt-4"
+                        v-if="this.buttonFooterCopy"
+                        v-html="this.buttonFooterCopy"></div>
+                </div>
+
+                <div
+                    v-if="
+                        this.additionalButtonData.servicePackageDiscount &&
+                        this.additionalButtonData.Text
+                    "
+                    class="special-save-box">
+                    <span v-html="this.additionalButtonData.Text"></span>
+                </div>
+            </div>
+        </div>
+    </baseInputButton>
+</template>
+
+<script>
+import baseInputButton from "@/digital-components/base-input-button/base-input-button";
+import textLink from "@/ux-components/text-link/text-link";
+import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
+import {
+    getRouterLinkDisplayTextFromCopy,
+    getRouterLinkRouteFromCopy,
+    splitCopyOnCMSPlaceHolder,
+    doesCopyContainTextLink,
+} from "@/helpers/cms-content-helper";
+
+import experimentMixin from "@/mixins/experiment-mixin";
+import { experimentSettings } from "@/constants/experiments";
+import store from "@/store";
+
+export default {
+    name: "servicePackageRadio",
+    mixins: [inputButtonWrapperMixin],
+    props: {
+        isInsuranceSelected: Boolean,
+    },
+    components: {
+        baseInputButton,
+        textLink,
+    },
+    computed: {
+        arrayOfListItemsFromBodyText() {
+            return this.getArrayOfListItemsFromRawCmsCopy(this.buttonBodyCopy);
+        },
+        shouldDisplayStrikeThroughPrice() {
+            const displayPrice = this.buttonAuxillaryCopy.substring(
+                this.buttonAuxillaryCopy.indexOf("$")
+            );
+            return displayPrice != this.additionalButtonData.strikeThroughPrice;
+        },
+        getDisplayPrice() {
+            return this.buttonAuxillaryCopy.split(".")[0];
+        },
+    },
+    methods: {
+        getRouterLinkDisplayTextFromCopy,
+        getRouterLinkRouteFromCopy,
+        splitCopyOnCMSPlaceHolder,
+        doesCopyContainTextLink,
+        stripUlTagFromCopy(copy) {
+            const regex = /(?:<ul(?:.*?)>)|(?:<\/ul>)/g;
+            return copy.replace(regex, "");
+        },
+        getArrayOfListItemsFromRawCmsCopy(copy) {
+            const withoutUlTags = this.stripUlTagFromCopy(copy);
+            return withoutUlTags
+                .split(/(?:<li(?:.*?)>)|(?:<\/li>)/g)
+                .filter((lineItem) => lineItem);
+        },
+    },
+};
+</script>
+
+<style lang="scss">
+.package-main {
+    .package-wrapper {
+        margin: 1rem 0;
+        &:first-child {
+            margin: 1rem 0 0 0;
+        }
+        &:last-child {
+            margin: 1rem 0 0 0;
+        }
+        @include media-breakpoint-up(md) {
+            margin: 1rem 0.5rem 0 0.5rem;
+            display: flex;
+            flex-direction: column;
+            &:first-child {
+                margin: 1rem 0.5rem 0 0;
+            }
+            &:last-child {
+                margin: 1rem 0 0 0.5rem;
+            }
+        }
+
+        label {
+            display: block;
+            @include media-breakpoint-up(md) {
+                display: flex;
+                height: 100%;
+            }
+        }
+
+        input[type="radio"] {
+            opacity: 0;
+            position: absolute;
+            left: -9999px;
+
+            + .package-label.pricing-by-day-pkg-lbl {
+                /* Copying a component for an experiment will cause duplication of css classes.
+                This can cause problems if you want change the value of something only for the experiment
+                version of the component.  So added a more specific selector for the parts I want to change
+                If this experiment wins, move this to package-label ::before/::after below
+                */
+                &:before { 
+                    top: 15px;
+                }
+                &:after {
+                    top: 30px;
+                }
+            }
+
+            + .package-label.pricing-by-day-pkg-lbl-ins {
+                &:before { 
+                    top: 5px;
+                }
+                &:after {
+                    top: 20px;
+                }
+            }
+
+            + .package-label {
+                display: flex;
+                align-items: flex-start;
+                position: relative;
+                cursor: pointer;
+                width: 100%;
+                padding: 0.75rem;
+                border: 1px solid $gray-300;
+                box-shadow:
+                    0px 4px 8px -4px rgba(0, 0, 0, 0.15),
+                    0px 4px 24px -8px rgba(0, 0, 0, 0.2);
+                border-radius: 0.5rem;
+                overflow: hidden;
+                min-height: 52px;
+                max-height: 126px;
+                @include media-breakpoint-up(md) {
+                    max-height: 500px;
+                    padding-bottom: 3rem;
+                }
+                transition: max-height 0.25s ease-in;
+
+                &.has-subheader {
+                    min-height: 72px;
+                }
+
+                &:before {
+                    content: "";
+                    position: relative;
+                    margin-right: 0.5rem;
+                    border-radius: 50%;
+                    border: 1px solid $gray-500;
+                    width: 16px;
+                    height: 16px;
+                    min-width: 16px;
+                }
+
+                &:after {
+                    content: "";
+                    position: absolute;
+                    left: 15px;
+                    border-radius: 50%;
+                    width: 10px;
+                    height: 10px;
+                    min-width: 10px;
+                }
+            }
+
+            &:hover {
+                + .package-label {
+                    &:before {
+                        border: 1px solid #8e9292;
+                        box-shadow:
+                            0px 0px 0px 4px #9fcee6,
+                            0px 1px 4px rgba(0, 0, 0, 0.2);
+                    }
+                }
+            }
+
+            &:checked {
+                + .package-label {
+                    .package-specs {
+                        max-height: 1000px;
+                    }
+                }
+                + .package-label {
+                    .package-specs {
+                        .hide-when-closed {
+                            display: block;
+                        }
+                    }
+                }
+                + .package-label {
+                    background-color: $blue-100;
+                    border: 1px solid $blue;
+                    max-height: 500px;
+                    .special-save-box {
+                        background-color: $green-200;
+                    }
+                }
+                + .package-label {
+                    &:before {
+                        box-shadow: 0px 0px 0px 1px $blue;
+                    }
+                }
+                + .package-label {
+                    &:after {
+                        background: $blue;
+                    }
+                }
+            }
+
+            &:focus {
+                + .package-label {
+                    &:before {
+                        border: 2px solid $blue;
+                    }
+                }
+            }
+        }
+
+        .package-footer {
+            color: $red;
+            font-weight: 600;
+        }
+
+        .package-specs {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            transition: all 0.5s ease;
+            @include media-breakpoint-up(md) {
+                max-height: 500px;
+            }
+
+            span.pricing-by-day {
+                color: #4d5151;
+                display: block;
+                white-space: nowrap;
+            }
+
+            .row {
+                align-items: center;
+            }
+
+            p {
+                font-weight: 600;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                white-space: nowrap;
+                span {
+                    &.pricing-info-pricing-by-day {
+                        text-align: end;
+                        color: $green;
+                        font-size: 0.875rem;
+                        span.strikethrough-price {
+                            text-decoration: line-through;
+                            font-size: 0.75rem;
+                            font-weight: 400;
+                            color: $gray-550;
+                            padding-right: 8px;
+                        }
+                    }
+                }
+                &.sub-label {
+                    color: $green;
+                    text-transform: uppercase;
+                    font-size: 0.75rem;
+                }
+            }
+            span {
+                &.service-package-discount-pricing-by-day {
+                    color: $green;
+                    text-align: end;
+                    font-weight: 600;
+                    font-size: 0.875rem;
+                    display: flex;
+                    justify-content: flex-end;
+                    align-items: center;
+                    align-self: flex-start;
+                    div.strikethrough-discount-price {
+                        display:inline;
+                        text-decoration: line-through;
+                        margin-right: 0.5rem;
+                        font-weight: 400;
+                        font-size: 0.75rem;
+                        line-height: 20px;
+                        color: $gray-550;
+                        @include media-breakpoint-up(md) {
+                            margin-right: 0.5rem;
+                            font-size: 0.75rem;
+                        }
+                    }
+                    div.discount-price {
+                        color: $green;
+                        display:inline;
+                    }
+                }
+            }
+            ul {
+                margin: 1rem 0 0 -5px;
+                padding: 0;
+                li {
+                    font-size: 0.875rem;
+                    line-height: 1.714;
+                    color: $gray-550;
+                    a {
+                        line-height: 1.714;
+                        padding: 0;
+                    }
+                }
+            }
+
+            @keyframes slideaway {
+                from {
+                    display: block;
+                }
+                to {
+                    transform: translateY(40px);
+                    opacity: 0;
+                }
+            }
+
+            .hide-when-closed {
+                display: none;
+                @include media-breakpoint-up(md) {
+                    display: flex;
+                    flex-direction: column;
+                }
+            }
+        }
+        .discount-text {
+            height: 2rem;
+            display: flex;
+            border-top-right-radius: 0.5rem;
+            border-top-left-radius: 0.5rem;
+            background-color: $green;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            color: white;
+            text-transform: uppercase;
+            font-size: 0.875rem;
+            font-weight: 600;
+            letter-spacing: 0.75px;
+        }
+        .special-save-box {
+            background-color: $green-100;
+            display: flex;
+            flex-direction: row;
+            margin: auto;
+            margin-left: -1.25rem;
+            padding: 0.5rem 1rem;
+            border-radius: 0.25rem;
+            margin-top: 0.5rem;
+            span {
+                color: $green;
+                font-size: 0.875rem;
+                font-weight: 600;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/layouts/quote/quote.vue b/src/layouts/quote/quote.vue
index 20dc16304..eb8268551 100644
--- a/src/layouts/quote/quote.vue
+++ b/src/layouts/quote/quote.vue
@@ -387,8 +387,7 @@ export default {
 
             // prettier-ignore
             {
-                const log = getQuerystringParameter(queryStrings.LOG);
-                if (log === "true") {
+                if (store.getters.applicationUser.loggingOption) {
                     console.log("------------- quote.vue thresholds start -----------------");
                     console.log(new Date() + " isExternalParameter: " + isExternalParameter);
                     console.log(new Date() + " internalThreshold: " + internalThreshold);
diff --git a/src/layouts/quote/service-package-question/service-package-question.vue b/src/layouts/quote/service-package-question/service-package-question.vue
index b39213267..982d03948 100644
--- a/src/layouts/quote/service-package-question/service-package-question.vue
+++ b/src/layouts/quote/service-package-question/service-package-question.vue
@@ -4,11 +4,12 @@
         :answers="servicePackageAnswers"
         :groupName="groupName"
         buttonTypeString="servicePackageRadio"
-        :buttonTypeObject="servicePackageRadio"
+        :buttonTypeObject="hasPricingByDay() ? servicePackageRadioExperiment : servicePackageRadio"
         v-model="selectedPackageName"
         :validationRules="validationRules"
         :isRequired="isRequired"
-        :logDisplayedValuesEvent="true" />
+        :logDisplayedValuesEvent="true"
+        :isInsuranceSelected="isInsuranceSelected" />
 </template>
 
 <script>
@@ -16,6 +17,7 @@ import buttonQuestion from "@/digital-components/button-question/button-question
 import baseMixin from "@/mixins/base-mixin.js";
 import { processIfStatements } from "@/helpers/cms-content-helper";
 import servicePackageRadio from "./service-package-radio/service-package-radio";
+import servicePackageRadioExperiment from "@/experiment-components/service-package-radio";
 import { partTypeStrings } from "@/constants/part-type-strings";
 import { packageNames } from "@/constants/package-names";
 import {
@@ -58,6 +60,7 @@ export default {
     data() {
         return {
             servicePackageRadio: servicePackageRadio,
+            servicePackageRadioExperiment: servicePackageRadioExperiment,
             selectedPackageName: null,
         };
     },
@@ -223,6 +226,14 @@ export default {
     },
     methods: {
         processIfStatements,
+        hasPricingByDay() {
+            return (
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.PRICING_BY_DAY,
+                    "true"
+                ) && !this.isInsuranceSelected
+            );
+        },
         getHeaderTextFromCms(cmsWidgetName) {
             return this.getCmsContent(cmsWidgetName, "HeaderText");
         },

From a7ab6738199919348c7d709f66a0176c989b60ae Mon Sep 17 00:00:00 2001
From: hiteshkumar87 <hitesh.kumar@safelite.com>
Date: Mon, 17 Feb 2025 14:41:27 +0530
Subject: [PATCH 06/13] CASH-170

code optimization with single event setMobileLocationAndProceed
---
 .../mobile-location-modal-questions.spec.js   | 17 +++------
 .../mobile-location-modal-questions.vue       | 13 ++-----
 .../service-location/service-location.spec.js | 35 ++++++-------------
 .../service-location/service-location.vue     | 30 +++++++---------
 4 files changed, 31 insertions(+), 64 deletions(-)

diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
index 91f26b64d..f38262005 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.spec.js
@@ -203,7 +203,7 @@ describe("mobile-location-modal-questions.vue", () => {
         expect(wrapper.vm.$refs.MobileLocationModalWidget.openModal).toHaveBeenCalled();
     });
 
-    it("Should emit updated-mobile-location-questions on setMobileLocation for a valid address and vehicle protection answer", async () => {
+    it("Should emit setMobileLocationAndProceed on setMobileLocation for a valid address and vehicle protection answer", async () => {
         // Arrange
         const mobileLocationQuestions = {
             addressQuestions: {
@@ -240,26 +240,19 @@ describe("mobile-location-modal-questions.vue", () => {
         });
         wrapper.vm.$refs.MobileLocationModalWidget.closeModal = jest.fn();
 
-        // Mock the emitEvent function
-        wrapper.vm.emitEvent = jest.fn(async (eventName, payload) => {
-            return new Promise((resolve) => {
-                wrapper.vm.$emit(eventName, newMobileLocationQuestions, resolve);
-                resolve(newMobileLocationQuestions);
-            });
-        });
         // Act
         wrapper.vm.internalModel = newMobileLocationQuestions;
 
         await wrapper.vm.setMobileLocation();
 
         // Assert
-        expect(wrapper.emitted()["updated-mobile-location-questions"]).toBeTruthy();
-        expect(wrapper.emitted()["updated-mobile-location-questions"][0][0]).toBe(
+        expect(wrapper.emitted()["setMobileLocationAndProceed"]).toBeTruthy();
+        expect(wrapper.emitted()["setMobileLocationAndProceed"][0][0]).toStrictEqual(
             newMobileLocationQuestions
         );
     });
 
-    it("Should not emit updated-mobile-location-questions on setMobileLocation for an invalid address zip code", async () => {
+    it("Should not emit setMobileLocationAndProceed on setMobileLocation for an invalid address zip code", async () => {
         // Arrange
         const mobileLocationQuestions = {
             addressQuestions: {
@@ -302,7 +295,7 @@ describe("mobile-location-modal-questions.vue", () => {
         await wrapper.vm.setMobileLocation();
 
         // Assert
-        expect(wrapper.emitted("updated-mobile-location-questions")).not.toBeTruthy();
+        expect(wrapper.emitted("setMobileLocationAndProceed")).not.toBeTruthy();
     });
 
     it("Should display invalid zip alert for invalid address zip inputs", async () => {
diff --git a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
index dadbaff8b..4672cca7f 100644
--- a/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
+++ b/src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue
@@ -97,8 +97,7 @@ export default {
         "updated-mobile-fee-part",
         "updated-contains-military-base",
         "updated-bill-to-account-number",
-        "mobileLocationSelected",
-        "updated-mobile-location-questions",
+        "setMobileLocationAndProceed",
     ],
     data() {
         return {
@@ -287,15 +286,7 @@ export default {
                 this.$emit("updated-bill-to-account-number", billToAccountNumber);
             }
             // update the page level model
-            await this.emitEvent("updated-mobile-location-questions", this.internalModel);
-
-            this.$emit("mobileLocationSelected");
-        },
-        //creating emitEvent function to raise events with resolve callback to handle events sequencing
-        async emitEvent(eventName, payload) {
-            return new Promise((resolve) => {
-                this.$emit(eventName, payload, resolve);
-            });
+            this.$emit("setMobileLocationAndProceed", this.internalModel);
         },
     },
     watch: {
diff --git a/src/layouts/service-location/service-location.spec.js b/src/layouts/service-location/service-location.spec.js
index b29ec604b..01008c49c 100644
--- a/src/layouts/service-location/service-location.spec.js
+++ b/src/layouts/service-location/service-location.spec.js
@@ -438,6 +438,7 @@ describe("service-location.vue", () => {
                 ref: "serviceZipCodeQuestion",
             });
             serviceZipCodeComponent.resetMobileFeePart = jest.fn();
+            wrapper.vm.forwardButtonAction = jest.fn();
 
             const mobileLocationQuestions = {
                 addressQuestions: {
@@ -450,7 +451,6 @@ describe("service-location.vue", () => {
                 isVehicleProtected: null,
             };
             wrapper.vm.mobileLocationQuestions = mobileLocationQuestions;
-
             const newMobileLocationQuestions = {
                 addressQuestions: {
                     streetAddress: "5555 Sulgrave Dr",
@@ -464,21 +464,13 @@ describe("service-location.vue", () => {
 
             // Act
 
-            // Mock the emitEvent function
-            mobileLocationQuestionsComponent.vm.emitEvent = jest.fn(async (eventName, payload) => {
-                return new Promise((resolve) => {
-                    mobileLocationQuestionsComponent.vm.$emit(eventName, payload, resolve);
-                });
-            });
-
             // Trigger the event
-            await mobileLocationQuestionsComponent.vm.emitEvent(
-                "updated-mobile-location-questions",
+            await mobileLocationQuestionsComponent.vm.$emit(
+                "setMobileLocationAndProceed",
                 newMobileLocationQuestions
             );
 
             await wrapper.vm.$nextTick(); // Wait for DOM updates
-            await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for promise to resolve
 
             // Assert
             expect(wrapper.vm.mobileLocationQuestions).toStrictEqual(newMobileLocationQuestions);
@@ -505,7 +497,7 @@ describe("service-location.vue", () => {
                 ref: "serviceZipCodeQuestion",
             });
             serviceZipCodeComponent.resetMobileFeePart = jest.fn();
-
+            wrapper.vm.forwardButtonAction = jest.fn();
             const mobileLocationQuestions = {
                 addressQuestions: {
                     streetAddress: "",
@@ -545,21 +537,13 @@ describe("service-location.vue", () => {
 
             // Act
 
-            // Mock the emitEvent function
-            mobileLocationQuestionsComponent.vm.emitEvent = jest.fn(async (eventName, payload) => {
-                return new Promise((resolve) => {
-                    mobileLocationQuestionsComponent.vm.$emit(eventName, payload, resolve);
-                });
-            });
-
             // Trigger the event
-            await mobileLocationQuestionsComponent.vm.emitEvent(
-                "updated-mobile-location-questions",
+            await mobileLocationQuestionsComponent.vm.$emit(
+                "setMobileLocationAndProceed",
                 newMobileLocationQuestions
             );
 
             await wrapper.vm.$nextTick(); // Wait for DOM updates
-            await new Promise((resolve) => setTimeout(resolve, 0)); // Wait for promise to resolve
 
             // Assert
             expect(wrapper.vm.serviceZipCodeQuestion).toStrictEqual(newServiceZipCodeInfo);
@@ -581,6 +565,7 @@ describe("service-location.vue", () => {
                 ref: "mobileLocationQuestions",
             });
             mobileLocationQuestionsComponent.resetComponent = jest.fn();
+            wrapper.vm.forwardButtonAction = jest.fn();
 
             const serviceZipCodeComponent = wrapper.findComponent({
                 ref: "serviceZipCodeQuestion",
@@ -599,7 +584,10 @@ describe("service-location.vue", () => {
             };
 
             // Act
-            mobileLocationQuestionsComponent.vm.$emit("update:modelValue", mobileLocationQuestions);
+            mobileLocationQuestionsComponent.vm.$emit(
+                "setMobileLocationAndProceed",
+                mobileLocationQuestions
+            );
 
             // Assert
             expect(wrapper.vm.selectedAppointmentType).toStrictEqual("Mobile");
@@ -1432,6 +1420,5 @@ function setupMocks({ mountOptionsMockData = {} }) {
     const mountOptions = getMountOptions(mountOptionsMockData);
     const wrapper = shallowMount(serviceLocation, mountOptions);
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-
     return { wrapper, apiPromise };
 }
diff --git a/src/layouts/service-location/service-location.vue b/src/layouts/service-location/service-location.vue
index 47cf5262e..033339ebe 100644
--- a/src/layouts/service-location/service-location.vue
+++ b/src/layouts/service-location/service-location.vue
@@ -93,12 +93,11 @@
                         @updated-serviceability="setServiceabilityDetails"
                         @updated-contains-military-base="setContainsMilitaryBase"
                         @updated-mobile-ctu="setCtuForMobile"
-                        @updated-mobile-location-questions="setMobileLocationQuestions"
                         validationRules="mobile-location-required"
                         ref="mobileLocationQuestions"
                         linkWidgetName="MobileLocationLinkWidget"
                         modalWidgetName="MobileLocationModalWidget"
-                        @mobileLocationSelected="forwardButtonAction" />
+                        @setMobileLocationAndProceed="setMobileLocationQuestions" />
 
                     <shopQuestion
                         ref="shopQuestion"
@@ -297,19 +296,6 @@ export default {
                     isVehicleProtected: this.isVehicleProtected,
                 };
             },
-            async set(newValue) {
-                if (newValue.addressQuestions.zipCode !== this.zipCode) {
-                    await getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
-                        this.shopProviderData = result.data;
-                        this.selectedProvider = new Provider(
-                            this.shopProviderData.mobileProviderNumber
-                        );
-                    });
-                }
-                this.setMobileLocation(newValue);
-                //handle promise
-                newValue.resolve?.();
-            },
         },
         isServiceableMobile() {
             if (this.isRecalibrationServiceableMobile !== null) {
@@ -488,8 +474,18 @@ export default {
             this.mobileFeePart = mobileFeePart;
         },
         //creating async function as the computed property can not directly handle asynchronous operations or promises.
-        async setMobileLocationQuestions(newValue, resolve) {
-            this.mobileLocationQuestions = { ...newValue, resolve };
+        async setMobileLocationQuestions(newValue) {
+            if (newValue.addressQuestions.zipCode !== this.zipCode) {
+                await getShopProviderData(newValue.addressQuestions.zipCode).then((result) => {
+                    this.shopProviderData = result.data;
+                    this.selectedProvider = new Provider(
+                        this.shopProviderData.mobileProviderNumber
+                    );
+                });
+            }
+            this.setMobileLocation(newValue);
+            //proceed to next page
+            this.forwardButtonAction();
         },
         getServiceAddressFromStore() {
             return store.getters.order.serviceLocation.address;

From 69c706d80d30c9fb9b2e8baa8eb41100fb183b48 Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Mon, 17 Feb 2025 05:59:37 -0500
Subject: [PATCH 07/13] CASH-151

CASH-151 Fix test
---
 .../service-package-radio.vue                 | 25 ++++++++++++-------
 .../service-package-question.spec.js          |  3 +++
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/experiment-components/service-package-radio.vue b/src/experiment-components/service-package-radio.vue
index c17ccdc9e..8634250ab 100644
--- a/src/experiment-components/service-package-radio.vue
+++ b/src/experiment-components/service-package-radio.vue
@@ -2,8 +2,10 @@
     <baseInputButton v-bind="$props" @buttonClicked="handleAnswerChange" v-model="selectedValue">
         <div
             class="package-label"
-            :class="[this.buttonLabelSubCopy ? 'has-subheader' : '',
-                this.isInsuranceSelected ? 'pricing-by-day-pkg-lbl-ins' : 'pricing-by-day-pkg-lbl']"
+            :class="[
+                this.buttonLabelSubCopy ? 'has-subheader' : '',
+                this.isInsuranceSelected ? 'pricing-by-day-pkg-lbl-ins' : 'pricing-by-day-pkg-lbl',
+            ]"
             for="testradio">
             <div class="package-specs">
                 <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
@@ -18,8 +20,11 @@
                     </div>
                     <span class="col md-6 service-package-discount-pricing-by-day">
                         <div>
-                            <span v-if="!isInsuranceSelected" class="caption pricing-by-day">as low as</span>
-                            <div class="strikethrough-discount-price"
+                            <span v-if="!isInsuranceSelected" class="caption pricing-by-day">
+                                as low as
+                            </span>
+                            <div
+                                class="strikethrough-discount-price"
                                 v-if="shouldDisplayStrikeThroughPrice"
                                 v-html="this.additionalButtonData.strikeThroughPrice"></div>
                             <div class="discount-price" v-html="getDisplayPrice"></div>
@@ -30,7 +35,9 @@
                     <p class="m-0">
                         <span v-html="this.buttonLabel"></span>
                         <span class="pricing-info-pricing-by-day">
-                            <span v-if="!isInsuranceSelected" class="caption pricing-by-day">as low as</span>
+                            <span v-if="!isInsuranceSelected" class="caption pricing-by-day">
+                                as low as
+                            </span>
                             <span
                                 class="strikethrough-price"
                                 v-if="shouldDisplayStrikeThroughPrice"
@@ -192,7 +199,7 @@ export default {
                 version of the component.  So added a more specific selector for the parts I want to change
                 If this experiment wins, move this to package-label ::before/::after below
                 */
-                &:before { 
+                &:before {
                     top: 15px;
                 }
                 &:after {
@@ -201,7 +208,7 @@ export default {
             }
 
             + .package-label.pricing-by-day-pkg-lbl-ins {
-                &:before { 
+                &:before {
                     top: 5px;
                 }
                 &:after {
@@ -370,7 +377,7 @@ export default {
                     align-items: center;
                     align-self: flex-start;
                     div.strikethrough-discount-price {
-                        display:inline;
+                        display: inline;
                         text-decoration: line-through;
                         margin-right: 0.5rem;
                         font-weight: 400;
@@ -384,7 +391,7 @@ export default {
                     }
                     div.discount-price {
                         color: $green;
-                        display:inline;
+                        display: inline;
                     }
                 }
             }
diff --git a/src/layouts/quote/service-package-question/service-package-question.spec.js b/src/layouts/quote/service-package-question/service-package-question.spec.js
index d8edb254c..bbfde93e9 100644
--- a/src/layouts/quote/service-package-question/service-package-question.spec.js
+++ b/src/layouts/quote/service-package-question/service-package-question.spec.js
@@ -29,6 +29,9 @@ jest.mock("@/mixins/experiment-mixin.js", () => ({
                 return true;
             }
         },
+        hasSettingEqualTo(settingName, settingValue) {
+            return true;
+        },
     },
 }));
 

From 937f84cdcc5bb83c146bd6f28fe0080854709198 Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Mon, 17 Feb 2025 06:04:09 -0500
Subject: [PATCH 08/13] CASH-151

CASH-151 exclude experiment components from code coverage
---
 jest.config.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/jest.config.js b/jest.config.js
index 04f474e53..8962dfa67 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -28,6 +28,7 @@ module.exports = {
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
+    "!src/experiment-components/.vue",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

From 6503922cd0b665b5b98446d3566f615d1c1d46ee Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Mon, 17 Feb 2025 07:00:30 -0500
Subject: [PATCH 09/13] CASH-151

CASH-151 forgot the wildcard
---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index 8962dfa67..5747d568d 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -28,7 +28,7 @@ module.exports = {
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
-    "!src/experiment-components/.vue",
+    "!src/experiment-components/*.vue",
     // END
   ], // ! means exclude from coverage.
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],

From 0aba0acefcbee2e46ef241a551f3f6baed0cbb30 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 18 Feb 2025 09:27:56 -0500
Subject: [PATCH 10/13] CASH-191 fix button border issue.

---
 .../save-progress-modal-question.vue                        | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index c6e31b781..ad4f2a203 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -149,6 +149,12 @@ export default {
         transition: all 150ms linear;
         background: none;
 
+        &.btn {
+            &.btn-secondary {
+                border: none;
+            }
+        }
+
         &:hover,
         &:active,
         &:focus,

From 96e20cbce1eeb4949a67999c31364caf061c0c14 Mon Sep 17 00:00:00 2001
From: Bryan Mauger <bryan.mauger@safelite.com>
Date: Tue, 18 Feb 2025 13:05:31 -0500
Subject: [PATCH 11/13] CASH-191 fix button hover.

---
 .../save-progress-modal-question.vue                      | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
index ad4f2a203..6d77afc44 100644
--- a/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
+++ b/src/fmg-components/save-progress-modal-question/save-progress-modal-question.vue
@@ -152,6 +152,14 @@ export default {
         &.btn {
             &.btn-secondary {
                 border: none;
+                &:hover,
+                &:active,
+                &:focus,
+                &:focus-visible {
+                    color: $blue-700;
+                    background: none;
+                    box-shadow: none;
+                }
             }
         }
 

From 918a8ca593f577897755077d1c12e716165e213f Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Wed, 19 Feb 2025 15:29:29 -0500
Subject: [PATCH 12/13] CASH-242

CASH-242 revert change for CSR-2276 and test with quick quote
---
 src/store/index.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/store/index.js b/src/store/index.js
index 03e8f339a..1f68c4989 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -524,6 +524,7 @@ export const mutations = {
     },
     resetExternalParameterQuoteState(state) {
         externalParameterState.quote.servicePackage = null;
+        externalParameterState.quote.isInsurance = null;
         saveExternalParameterState(externalParameterState);
     },
     resetIsExternalParameter(state) {
@@ -713,6 +714,7 @@ export const mutations = {
             !sessionInformation.order.serviceLocation.provider?.providerNumber
         ) {
             state.order.payment.isInsurance = null;
+            //externalParameterState.isExternalParameter = externalParameterStatus.NOT_SET;
         } else {
             state.order.payment.isInsurance = sessionInformation.order.payment.isInsurance;
         }

From 50c9517fbbde1d941044fb4ad12407d73341679c Mon Sep 17 00:00:00 2001
From: CarlNation <Carl.Nation@safelite.com>
Date: Wed, 19 Feb 2025 15:36:44 -0500
Subject: [PATCH 13/13] CASH-242

CASH-242 remove comment
---
 src/store/index.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/index.js b/src/store/index.js
index 1f68c4989..83c38c570 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -714,7 +714,6 @@ export const mutations = {
             !sessionInformation.order.serviceLocation.provider?.providerNumber
         ) {
             state.order.payment.isInsurance = null;
-            //externalParameterState.isExternalParameter = externalParameterStatus.NOT_SET;
         } else {
             state.order.payment.isInsurance = sessionInformation.order.payment.isInsurance;
         }