CASH-845: move old versions prior to CASH-845 work into their own files with comments and excluded from unit tests

jest.config.js

@@ -31,6 +31,9 @@ module.exports = {
     "!src/layouts/payment-pia-return/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance/*.vue", // Temp test exclusion while in development
     "!src/layouts/insurance-company/*.vue", // Temp test exclusion while in development
+
+    "!src/**/*-june-2025.vue", // Exclude these temporary files for CASH-845 project
+
     "!src/layouts/insurance-company/insurance-company-question/*.vue", // Temp test exclusion while in development
     "!src/experiment-components/*.vue",
     // END

src/layouts/schedule/schedule-june-2025.vue

@@ -0,0 +1,782 @@
+<!-- OLD SCHEDULE BEGINS -->
+
+<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
+
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles page-schedule">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
+                    <template v-if="ChangeShopLink.length">
+                        <textBlock
+                            cmsWidgetName="ChangeShopLink"
+                            justifyText="center"
+                            class="mb-5 text-link-small change-location"
+                            marginTopSizeOverride="1" />
+                    </template>
+                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
+                    <datePicker
+                        customComponentId="dateQuestion"
+                        selectableDatesSetting="custom"
+                        ref="datePicker"
+                        v-model="selectedDate"
+                        class="text-link-small"
+                        :customSelectableDatesCallback="getAvailableDatesMethod"
+                        validationRules="date-required"
+                        @date-clicked="handleDateClicked"
+                        :pricingByDayBasePrice="pricingByDayBasePrice"
+                        :pricingByDayUpcharge="pricingByDayUpcharge"
+                        :showPricingByDay="showPricingByDay"
+                        :isPricingByDayExperiment="isPricingByDayExperiment"
+                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
+                        :appointmentType="appointmentType"
+                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
+                        :estimatedServiceMinutesMinimum="
+                            selectableDatesData.estimatedServiceMinutesMinimum
+                        "
+                        :estimatedServiceMinutesMaximum="
+                            selectableDatesData.estimatedServiceMinutesMaximum
+                        "
+                        @TimeSlotSelected="updateTimeSlot"
+                        :displayWaitList="displayWaitList"
+                        @waitListRequested="handleWaitListRequested" />
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form, defineRule } from "vee-validate";
+import datePicker from "@/digital-components/date-picker/date-picker";
+import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
+import textBlock from "@/digital-components/text-block/text-block";
+
+// Supporting files
+import { queryStrings } from "@/constants/query-strings";
+import { getQuerystringParameter } from "@/helpers/querystring-helper";
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
+import {
+    calcDaysBetweenDates,
+    convertDateStringToDate,
+    sumDateString,
+} from "@/layouts/schedule/helpers/schedule-helper";
+import {
+    AppointmentTypeStrings,
+    PREMIUM_FEE_PART_TYPE,
+    PRICING_BY_DAY_PART_TYPE,
+} from "@/constants/schedule-constants";
+import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
+import { errorMessages } from "@/constants/error-messages";
+import { required } from "@/helpers/validation-rules";
+import store from "@/store";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
+import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
+import { partNumberStrings } from "@/constants/part-number-strings";
+import { deepClone } from "@/helpers/object-helper";
+import { debugLog } from "@/helpers/debug-log-helper";
+
+// DEFINE VALIDATION RULES
+defineRule("date-required", required(errorMessages.DATE_REQUIRED));
+
+// Define constants
+const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
+
+const getAvailableDates = async (
+    startDateString,
+    endDateString,
+    appointmentType,
+    providerNumber
+) => {
+    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
+    const difference = calcDaysBetweenDates(startDateString, endDateString);
+    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
+    const storeActionConfigs = [];
+    const timeSlotsData = {};
+    timeSlotsData.days = [];
+    let apiStartDate = startDateString;
+    let apiEndDate = endDateString;
+
+    for (let i = 1; i <= apiCallsCount; i++) {
+        let storeActionConfig;
+
+        if (i > 1) {
+            apiStartDate = sumDateString(apiEndDate, 1);
+            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
+
+            if (i === apiCallsCount) {
+                apiEndDate = endDateString;
+            }
+        } else {
+            if (apiEndDate > apiEndDateLimit) {
+                apiEndDate = apiEndDateLimit;
+            }
+        }
+
+        if (appointmentType === AppointmentTypeStrings.MOBILE) {
+            storeActionConfig = {
+                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                },
+            };
+        } else {
+            storeActionConfig = {
+                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
+                payload: {
+                    startDate: apiStartDate,
+                    endDate: apiEndDate,
+                    shopAppointmentType: appointmentType,
+                    providerNumber: providerNumber,
+                },
+            };
+        }
+        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
+    }
+
+    const timeSlotsResponsesData = {
+        days: [],
+    };
+
+    function compareDayStrings(a, b) {
+        if (a.date < b.date) return -1;
+        if (a.date > b.date) return 1;
+        return 0;
+    }
+
+    const makeParallelCalls = async () => {
+        await Promise.all(
+            storeActionConfigs.map(async (storeAction) => {
+                const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
+                    storeAction.storeAction,
+                    storeAction.payload,
+                    "schedule",
+                    false
+                );
+                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
+                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
+                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
+                timeSlotsResponsesData.days = [
+                    ...timeSlotsResponsesData.days,
+                    ...timeSlotsResponse.data.days,
+                ];
+            })
+        );
+    };
+
+    return makeParallelCalls().then(() => {
+        // sort days chronologically
+        timeSlotsResponsesData.days.sort(compareDayStrings);
+        return timeSlotsResponsesData;
+    });
+};
+
+export default {
+    name: "schedule",
+    data() {
+        return {
+            selectedDate: this.getSelectedDate(),
+            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
+            selectableDatesData: [],
+            mobilePremiumAppointmentFee: null,
+            waitListRequested: null,
+            displayWaitList: null,
+            pricingByDayUpchargeLineItem: null,
+            includePricingByDayUpcharge: null,
+            isPricingByDayExperiment: null,
+            pricingByDayBasePrice: null,
+            pricingByDayUpcharge: null,
+            showPricingByDay: null,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
+            experimentSettings.PRICING_BY_DAY,
+            "true"
+        );
+        const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
+
+        // Get pricingByDayBasePrice needed for Pricing By Day
+        const lineItems = deepClone(store.getters.order.lineItems);
+        const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
+        const shouldHideRecalibration =
+            experimentMixin.methods.hasSettingEqualTo(
+                experimentSettings.RECAL_PRICE_REMOVE,
+                "true"
+            ) && isRecalibrationOnOrder;
+        const glassParts =
+            isRecalibrationOnOrder && shouldHideRecalibration
+                ? getItemsWithoutRecalParts(lineItems.glassParts)
+                : (lineItems.glassParts ?? []);
+        const supportingItemsFromStore = lineItems?.supportingItems;
+        const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
+            lineItems.supportingItems,
+            {
+                partNumbersToRemove: [
+                    partNumberStrings.RECYCLE_FEE,
+                    partNumberStrings.PRICING_BY_DAY_UPCHARGE,
+                ],
+            }
+        );
+        const lineItemsToBePriced = {
+            glassParts: glassParts,
+            supportingItems: supportingItemsWithoutFees,
+            vaps: lineItems.vaps ?? [],
+            promos: lineItems.promos ?? [],
+        };
+        const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
+        const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
+        const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
+        let includePricingByDayUpcharge = false;
+
+        //  Check to see if date should be pre-selected
+        let preSelectedSlot = await store.getters.order.schedule;
+        if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
+            preSelectedSlot = null;
+        } else {
+            // Check to see if pre-selected date should have pricing by day upcharge
+            if (showPricingByDay) {
+                // is this preSelectedDate a higher priced pricingByDay day?
+                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
+                const dayObject = DAYS_OF_WEEK[dayIndex];
+                if (dayObject.isPricingByDayUpchargeDay) {
+                    includePricingByDayUpcharge = true;
+                }
+            }
+        }
+
+        // Set up promises
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
+            store.getters.order.serviceLocation.zipCodeCtu,
+            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
+        );
+
+        // While Pricing By Day Experiment is active, using the updated datePicker
+        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
+            // setup config options for date-picker
+            selectableDatesSetting: "custom",
+            initialViewRowsToShow: 2,
+            customSelectableDatesCallback: getAvailableDates,
+            preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
+        });
+
+        // Get pricingByDayUpcharge needed for Pricing By Day
+        const pricingByDayUpchargePartPromise = showPricingByDay
+            ? getPricingByDayPartWithPrice()
+            : null;
+
+        const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
+            storeActions.GET_MOBILE_PREMIUM_FEE,
+            null,
+            "schedule"
+        );
+        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
+            if (result.data) {
+                return baseMixin.methods.dispatchStoreActionWithLogging(
+                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
+                    {
+                        availableLineItems: [result.data],
+                    },
+                    "schedule",
+                    false
+                );
+            } else {
+                return result.data;
+            }
+        });
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "alertReasons",
+                promise: alertReasonsPromise,
+            },
+            {
+                resultKey: "datePickerInitialData",
+                promise: datePickerInitialDataPromise,
+            },
+            {
+                resultKey: "pricingByDayUpchargePart",
+                promise: pricingByDayUpchargePartPromise,
+            },
+            {
+                resultKey: "premiumFeeWithPrice",
+                promise: premiumFeeWithPricePromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        const pricingByDayUpcharge = showPricingByDay
+            ? await baseMixin.methods.getTotalLineItemPrice(
+                  resultMap.pricingByDayUpchargePart,
+                  false
+              )
+            : null;
+
+        const datePickerInitialData = resultMap.datePickerInitialData;
+        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
+        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
+            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
+            vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
+            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
+                ? resultMap.premiumFeeWithPrice[0]
+                : null;
+            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
+            vm.setDisplayWaitList();
+            vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
+            vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
+            vm.isPricingByDayExperiment = isPricingByDayExperiment;
+            vm.pricingByDayBasePrice = pricingByDayBasePrice;
+            vm.pricingByDayUpcharge = pricingByDayUpcharge;
+            vm.showPricingByDay = showPricingByDay;
+        });
+    },
+    mounted() {
+        this.$nextTick(() => {
+            const selectableDatesData = this.selectableDatesData;
+            // if no date selected on load
+            if (!this.selectedDate) {
+                if (selectableDatesData?.days?.length > 0) {
+                    this.selectedDate = selectableDatesData.days[0].date;
+                } else {
+                    setTimeout(() => {
+                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
+                            this.selectableDatesData = moreSelectableDatesData;
+                            if (selectableDatesData?.days?.length > 0) {
+                                this.selectedDate = selectableDatesData.days[0].date;
+                            }
+
+                            this.setDisplayWaitList();
+                        });
+                    }, 50);
+                }
+            }
+        });
+    },
+    computed: {
+        ChangeShopLinkText() {
+            return this.getCmsContent("ChangeShopLink", "Text");
+        },
+        ChangeShopLink() {
+            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
+        },
+        appointmentType() {
+            return this.$store.getters.order.serviceLocation.appointmentType;
+        },
+        timeSlotsForSelectedDate() {
+            if (!this.selectedDate) return null;
+
+            return this.selectableDatesData.days?.find(
+                (selectableDate) => selectableDate.date === this.selectedDate
+            );
+        },
+    },
+    methods: {
+        splitCopyOnCMSPlaceHolder,
+        arePagePrerequisitesValid() {
+            const serviceLocation = store.getters.order.serviceLocation;
+
+            const serviceLocationPreReqs =
+                serviceLocation.zipCode &&
+                serviceLocation.zipCodeCtu &&
+                serviceLocation.appointmentType &&
+                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
+                    serviceLocation.provider.providerNumber);
+
+            const paymentInfo = store.getters.payment.isInsurance !== null;
+
+            const damageInfo =
+                store.getters.order.damage.isRepair ||
+                (store.getters.order.lineItems?.glassParts != null &&
+                    store.getters.order.lineItems.glassParts.length > 0);
+
+            const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
+
+            // prettier-ignore
+            {
+                debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
+                debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
+                debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
+                debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
+                debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
+                debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
+            }
+            return preReqResult;
+        },
+        async getAvailableDatesMethod(startDate, endDate) {
+            const newShopTimeSlots = await getAvailableDates(
+                startDate,
+                endDate,
+                this.appointmentType,
+                this.$store.getters.order.serviceLocation.provider.providerNumber
+            );
+
+            // ADD API CALL RESULTS TO EXISTING DATE DATA
+            this.selectableDatesData.days = this.selectableDatesData.days.concat(
+                newShopTimeSlots.days
+            );
+            return newShopTimeSlots;
+        },
+        getAvailableDates,
+        getServiceZipCtuCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCodeCtu;
+        },
+        getSelectedDate() {
+            return store.getters.order.schedule.date;
+        },
+        getSelectedTimeSlotInfo() {
+            const supportingItems = this.getSupportingItems();
+
+            var isPremiumAppointment = false;
+            if (supportingItems) {
+                isPremiumAppointment =
+                    !!supportingItems.filter(
+                        (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
+                    ).length > 0;
+            }
+
+            const selectedTimeSlotInfo = {
+                timeSlot: store.getters.order.schedule,
+                isPremiumAppointment: isPremiumAppointment,
+            };
+
+            return selectedTimeSlotInfo;
+        },
+        getSupportingItems() {
+            return store.getters.lineItems.supportingItems;
+        },
+        updateFooterButtonText(timeSlotInfo) {
+            let navbarButtonText;
+            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
+                navbarButtonText = "Continue";
+            } else {
+                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
+                    timeSlotInfo.timeSlot.date
+                )}`;
+
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime
+                    )}`;
+                } else if (
+                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                    !timeSlotInfo.isPremiumAppointment
+                ) {
+                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.startTime,
+                        true
+                    )} - ${this.getDisplayTextForMilitaryTime(
+                        timeSlotInfo.timeSlot.endTime,
+                        true
+                    )}`;
+                }
+            }
+            this.$refs.navbar.updateButtonText(navbarButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = convertDateStringToDate(selectedDate);
+            // Ex: April 25
+            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
+        },
+        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+            // Expected input: "HH:MM"
+            let hours = parseInt(militaryTimeInput.split(":")[0]);
+            const minutes = militaryTimeInput.split(":")[1];
+            const meridianNotation = hours > 11 ? "PM" : "AM";
+
+            if (hours > 12) {
+                hours -= 12;
+            }
+
+            if (shouldTrimMinutesIfEmpty && minutes === "00") {
+                return `${hours} ${meridianNotation}`;
+            } else {
+                return `${hours}:${minutes} ${meridianNotation}`;
+            }
+        },
+        backButtonAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_BACK,
+                this.pageName
+            );
+        },
+        forwardButtonAction() {
+            this.updateSupportingItems();
+
+            if (this.displayWaitList) {
+                var gaLabel = "";
+                const status = this.waitListRequested ? "checked" : "unchecked";
+                const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
+                gaLabel = `${status}_${type}`;
+
+                const currentDate = new Date();
+                const dateString = this.selectableDatesData.days[0].date;
+                const [year, month, day] = dateString.split("-").map(Number);
+                const appointmentDate = new Date(year, month - 1, day);
+                const timeDifference = appointmentDate - currentDate;
+
+                // Convert the time difference from milliseconds to days
+                const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
+
+                gaLabel +=
+                    "_" +
+                    daysUntilAppointment.toString() +
+                    "_" +
+                    store.getters.order.serviceLocation.zipCode +
+                    "_" +
+                    store.getters.order.serviceLocation.zipCodeCtu;
+                this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
+            }
+            if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
+                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
+                    this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
+                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
+                    this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SCHEDULE,
+                this.selectedTimeSlotInfo.timeSlot,
+                false
+            );
+
+            if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_WAITLIST_REQUESTED,
+                    this.waitListRequested,
+                    false
+                );
+            }
+
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        setDisplayWaitList() {
+            if (
+                experimentMixin.methods.hasSettingEqualTo(
+                    experimentSettings.DISPLAY_WAITLIST,
+                    "true"
+                ) &&
+                this.selectableDatesData.days[0]
+            ) {
+                const dateString = this.selectableDatesData.days[0].date;
+                const [year, month, day] = dateString.split("-").map(Number);
+                const targetDate = new Date(year, month - 1, day);
+                const currentDate = new Date();
+                const futureDate = new Date(currentDate);
+                const experimentThresholdDays = experimentMixin.methods.hasSetting(
+                    experimentSettings.WAITLIST_THRESHOLD_DAYS
+                )
+                    ? parseInt(
+                          experimentMixin.methods.getSettingValue(
+                              experimentSettings.WAITLIST_THRESHOLD_DAYS
+                          )
+                      )
+                    : 0;
+                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
+
+                if (targetDate >= futureDate) {
+                    this.displayWaitList = true;
+                } else {
+                    this.displayWaitList = false;
+                }
+            }
+        },
+        updateSupportingItems() {
+            const supportingItems = this.getSupportingItems();
+
+            // if we have a pricing by day upcharge, then save/update supporting items with it
+            const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
+                (item) => item.partType == PRICING_BY_DAY_PART_TYPE
+            );
+
+            if (this.includePricingByDayUpcharge && this.showPricingByDay) {
+                if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
+                    supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
+                        this.pricingByDayUpchargeLineItem.laborAmount;
+                    supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
+                        this.pricingByDayUpchargeLineItem.sellingPrice;
+                    supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
+                        this.pricingByDayUpchargeLineItem.kitPrice;
+                } else {
+                    supportingItems.push(this.pricingByDayUpchargeLineItem);
+                }
+            } else {
+                if (pricingByDayUpchargeFeeIndex >= 0) {
+                    // remove pricing by day upcharge if it already was in store
+                    supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
+                }
+            }
+
+            // if we have a premium fee(early bird), then save/update supporting items
+            if (
+                this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                this.selectedTimeSlotInfo?.isPremiumAppointment
+            ) {
+                const premiumFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
+                );
+
+                if (premiumFeeIndex > -1) {
+                    supportingItems[premiumFeeIndex].laborAmount =
+                        this.mobilePremiumAppointmentFee.laborAmount;
+                    supportingItems[premiumFeeIndex].sellingPrice =
+                        this.mobilePremiumAppointmentFee.sellingPrice;
+                    supportingItems[premiumFeeIndex].kitPrice =
+                        this.mobilePremiumAppointmentFee.kitPrice;
+                } else {
+                    supportingItems.push(this.mobilePremiumAppointmentFee);
+                }
+            } else {
+                if (!supportingItems) {
+                    return;
+                }
+
+                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
+                const removePremiumFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
+                );
+
+                if (removePremiumFeeIndex >= 0) {
+                    supportingItems.splice(removePremiumFeeIndex, 1);
+                }
+            }
+
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                supportingItems,
+                false
+            );
+        },
+        handleWaitListRequested(value) {
+            this.waitListRequested = value;
+        },
+        handleDateClicked(date) {
+            // do something to mark this as upcharge day or not...
+            if (date.isPricingByDayUpchargeDay) {
+                this.includePricingByDayUpcharge = true;
+            } else {
+                this.includePricingByDayUpcharge = false;
+            }
+        },
+        updateTimeSlot(timeSlot) {
+            this.selectedTimeSlotInfo = timeSlot;
+        },
+    },
+    watch: {
+        selectedDate(newValue, oldValue) {
+            // Clear time slot selection if date selected changes
+            if (newValue !== oldValue) {
+                this.selectedTimeSlotInfo = {
+                    timeSlot: {
+                        date: null,
+                        routeCode: null,
+                        startTime: null,
+                        endTime: null,
+                        jobMaxMinutes: null,
+                        jobMinMinutes: null,
+                    },
+                    isPremiumAppointment: null,
+                };
+            }
+        },
+        selectedTimeSlotInfo(newValue) {
+            this.updateFooterButtonText(newValue);
+        },
+    },
+    components: {
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        datePicker,
+        locationAlerts,
+        textBlock,
+    },
+};
+</script>
+
+<style lang="scss">
+.container-fluid {
+    &.page-schedule {
+        padding: 0 1rem;
+        .text-link-small {
+            a,
+            .btn-link {
+                width: auto;
+                margin: 0 auto;
+                height: auto;
+                font-size: 0.875rem;
+                line-height: 1.75;
+                padding: 0;
+                border-radius: 0;
+                &:focus {
+                    outline: 1px solid $blue;
+                }
+                @include media-breakpoint-up(md) {
+                    font-size: 1rem;
+                }
+            }
+        }
+        .funnel-sub-header {
+            h5.dark-header {
+                margin-bottom: 0.25rem;
+            }
+        }
+        .change-location a {
+            font-family: AvertaSemibold;
+        }
+        .time-slots-question {
+            padding: 0 0.75rem;
+        }
+    }
+}
+</style>
+
+<!-- OLD SCHEDULE ENDS -->

src/layouts/schedule/schedule.vue

@@ -1,793 +1,3 @@
-<!-- OLD SCHEDULE BEGINS -->
-
-
-
-<template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles page-schedule">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
-                    <template v-if="ChangeShopLink.length">
-                        <textBlock
-                            cmsWidgetName="ChangeShopLink"
-                            justifyText="center"
-                            class="mb-5 text-link-small change-location"
-                            marginTopSizeOverride="1" />
-                    </template>
-                    <locationAlerts cmsWidgetPrefix="LocationAlert-" ref="locationAlerts" />
-                    <datePicker
-                        customComponentId="dateQuestion"
-                        selectableDatesSetting="custom"
-                        ref="datePicker"
-                        v-model="selectedDate"
-                        class="text-link-small"
-                        :customSelectableDatesCallback="getAvailableDatesMethod"
-                        validationRules="date-required"
-                        @date-clicked="handleDateClicked"
-                        :pricingByDayBasePrice="pricingByDayBasePrice"
-                        :pricingByDayUpcharge="pricingByDayUpcharge"
-                        :showPricingByDay="showPricingByDay"
-                        :isPricingByDayExperiment="isPricingByDayExperiment"
-                        :timeSlotsForSelectedDate="timeSlotsForSelectedDate"
-                        :appointmentType="appointmentType"
-                        :premiumAppointmentFee="mobilePremiumAppointmentFee"
-                        :estimatedServiceMinutesMinimum="
-                            selectableDatesData.estimatedServiceMinutesMinimum
-                        "
-                        :estimatedServiceMinutesMaximum="
-                            selectableDatesData.estimatedServiceMinutesMaximum
-                        "
-                        @TimeSlotSelected="updateTimeSlot"
-                        :displayWaitList="displayWaitList"
-                        @waitListRequested="handleWaitListRequested" />
-                    <navbar
-                        cmsWidgetName="FunnelFooterWidget"
-                        ref="navbar"
-                        :isForwardActionDisabled="!meta.valid"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form>
-</template>
-
-<script>
-// Components
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import navbar from "@/fmg-components/nav-bar/nav-bar";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form, defineRule } from "vee-validate";
-import datePicker from "@/digital-components/date-picker/date-picker";
-import locationAlerts from "@/layouts/schedule/location-alerts/location-alerts";
-import textBlock from "@/digital-components/text-block/text-block";
-
-// Supporting files
-import { queryStrings } from "@/constants/query-strings";
-import { getQuerystringParameter } from "@/helpers/querystring-helper";
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import baseMixin from "@/mixins/base-mixin.js";
-import { storeActions } from "@/constants/store-actions";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { splitCopyOnCMSPlaceHolder } from "@/helpers/cms-content-helper";
-import {
-    calcDaysBetweenDates,
-    convertDateStringToDate,
-    sumDateString,
-} from "@/layouts/schedule/helpers/schedule-helper";
-import {
-    AppointmentTypeStrings,
-    PREMIUM_FEE_PART_TYPE,
-    PRICING_BY_DAY_PART_TYPE,
-} from "@/constants/schedule-constants";
-import { DAYS_OF_WEEK } from "@/digital-components/date-picker/mixins/constants";
-import { errorMessages } from "@/constants/error-messages";
-import { required } from "@/helpers/validation-rules";
-import store from "@/store";
-import experimentMixin from "@/mixins/experiment-mixin.js";
-import { experimentSettings } from "@/constants/experiments";
-import { getAmountDue, getPricingByDayPartWithPrice } from "@/helpers/pricing-helper.js";
-import { getItemsWithoutRecalParts } from "@/helpers/recal-helper";
-import { partNumberStrings } from "@/constants/part-number-strings";
-import { deepClone } from "@/helpers/object-helper";
-import { debugLog } from "@/helpers/debug-log-helper";
-
-// DEFINE VALIDATION RULES
-defineRule("date-required", required(errorMessages.DATE_REQUIRED));
-
-// Define constants
-const TIME_SLOTS_CALL_DAYS_LIMIT = 34; // needs to be 34 for API limits (35 does not consistently work)
-
-const getAvailableDates = async (
-    startDateString,
-    endDateString,
-    appointmentType,
-    providerNumber
-) => {
-    const apiEndDateLimit = sumDateString(startDateString, TIME_SLOTS_CALL_DAYS_LIMIT);
-    const difference = calcDaysBetweenDates(startDateString, endDateString);
-    const apiCallsCount = Math.ceil(difference / TIME_SLOTS_CALL_DAYS_LIMIT);
-    const storeActionConfigs = [];
-    const timeSlotsData = {};
-    timeSlotsData.days = [];
-    let apiStartDate = startDateString;
-    let apiEndDate = endDateString;
-
-    for (let i = 1; i <= apiCallsCount; i++) {
-        let storeActionConfig;
-
-        if (i > 1) {
-            apiStartDate = sumDateString(apiEndDate, 1);
-            apiEndDate = sumDateString(apiStartDate, TIME_SLOTS_CALL_DAYS_LIMIT);
-
-            if (i === apiCallsCount) {
-                apiEndDate = endDateString;
-            }
-        } else {
-            if (apiEndDate > apiEndDateLimit) {
-                apiEndDate = apiEndDateLimit;
-            }
-        }
-
-        if (appointmentType === AppointmentTypeStrings.MOBILE) {
-            storeActionConfig = {
-                storeAction: storeActions.GET_MOBILE_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                },
-            };
-        } else {
-            storeActionConfig = {
-                storeAction: storeActions.GET_SHOP_TIME_SLOTS,
-                payload: {
-                    startDate: apiStartDate,
-                    endDate: apiEndDate,
-                    shopAppointmentType: appointmentType,
-                    providerNumber: providerNumber,
-                },
-            };
-        }
-        if (apiStartDate < apiEndDate) storeActionConfigs.push(storeActionConfig);
-    }
-
-    const timeSlotsResponsesData = {
-        days: [],
-    };
-
-    function compareDayStrings(a, b) {
-        if (a.date < b.date) return -1;
-        if (a.date > b.date) return 1;
-        return 0;
-    }
-
-    const makeParallelCalls = async () => {
-        await Promise.all(
-            storeActionConfigs.map(async (storeAction) => {
-                const timeSlotsResponse = await baseMixin.methods.dispatchStoreActionWithLogging(
-                    storeAction.storeAction,
-                    storeAction.payload,
-                    "schedule",
-                    false
-                );
-                timeSlotsResponsesData.estimatedServiceMinutesMinimum =
-                    timeSlotsResponse.data.estimatedServiceMinutesMinimum;
-                timeSlotsResponsesData.estimatedServiceMinutesMaximum =
-                    timeSlotsResponse.data.estimatedServiceMinutesMaximum;
-                timeSlotsResponsesData.days = [
-                    ...timeSlotsResponsesData.days,
-                    ...timeSlotsResponse.data.days,
-                ];
-            })
-        );
-    };
-
-    return makeParallelCalls().then(() => {
-        // sort days chronologically
-        timeSlotsResponsesData.days.sort(compareDayStrings);
-        return timeSlotsResponsesData;
-    });
-};
-
-export default {
-    name: "schedule",
-    data() {
-        return {
-            selectedDate: this.getSelectedDate(),
-            selectedTimeSlotInfo: this.getSelectedTimeSlotInfo(),
-            selectableDatesData: [],
-            mobilePremiumAppointmentFee: null,
-            waitListRequested: null,
-            displayWaitList: null,
-            pricingByDayUpchargeLineItem: null,
-            includePricingByDayUpcharge: null,
-            isPricingByDayExperiment: null,
-            pricingByDayBasePrice: null,
-            pricingByDayUpcharge: null,
-            showPricingByDay: null,
-        };
-    },
-    async beforeRouteEnter(to, from, next) {
-        const isPricingByDayExperiment = experimentMixin.methods.hasSettingEqualTo(
-            experimentSettings.PRICING_BY_DAY,
-            "true"
-        );
-        const showPricingByDay = !store.getters.payment.isInsurance && isPricingByDayExperiment;
-
-        // Get pricingByDayBasePrice needed for Pricing By Day
-        const lineItems = deepClone(store.getters.order.lineItems);
-        const isRecalibrationOnOrder = store.getters.isRecalibrationOnOrder;
-        const shouldHideRecalibration =
-            experimentMixin.methods.hasSettingEqualTo(
-                experimentSettings.RECAL_PRICE_REMOVE,
-                "true"
-            ) && isRecalibrationOnOrder;
-        const glassParts =
-            isRecalibrationOnOrder && shouldHideRecalibration
-                ? getItemsWithoutRecalParts(lineItems.glassParts)
-                : (lineItems.glassParts ?? []);
-        const supportingItemsFromStore = lineItems?.supportingItems;
-        const supportingItemsWithoutFees = baseMixin.methods.filterOutCertainPartTypesOrNumbers(
-            lineItems.supportingItems,
-            {
-                partNumbersToRemove: [
-                    partNumberStrings.RECYCLE_FEE,
-                    partNumberStrings.PRICING_BY_DAY_UPCHARGE,
-                ],
-            }
-        );
-        const lineItemsToBePriced = {
-            glassParts: glassParts,
-            supportingItems: supportingItemsWithoutFees,
-            vaps: lineItems.vaps ?? [],
-            promos: lineItems.promos ?? [],
-        };
-        const priceString = getAmountDue(lineItemsToBePriced, false); // pass the IncludeTax param as false
-        const priceStringIntegerRoundedDown = priceString?.split(".")[0]; // same method used as getDisplayPrice() in service-package-radio used on /quote
-        const pricingByDayBasePrice = parseInt(priceStringIntegerRoundedDown);
-        let includePricingByDayUpcharge = false;
-
-        //  Check to see if date should be pre-selected
-        let preSelectedSlot = await store.getters.order.schedule;
-        if (!preSelectedSlot.date || preSelectedSlot?.date?.length < 1) {
-            preSelectedSlot = null;
-        } else {
-            // Check to see if pre-selected date should have pricing by day upcharge
-            if (showPricingByDay) {
-                // is this preSelectedDate a higher priced pricingByDay day?
-                const dayIndex = convertDateStringToDate(preSelectedSlot?.date).getDay();
-                const dayObject = DAYS_OF_WEEK[dayIndex];
-                if (dayObject.isPricingByDayUpchargeDay) {
-                    includePricingByDayUpcharge = true;
-                }
-            }
-        }
-
-        // Set up promises
-        const cmsContentPromise = fetchCmsContentForPage(to.name);
-
-        const alertReasonsPromise = locationAlerts.methods.loadInitialData(
-            store.getters.order.serviceLocation.zipCodeCtu,
-            store.getters.order.serviceLocation.provider?.address?.zipCodeCtu
-        );
-
-        // While Pricing By Day Experiment is active, using the updated datePicker
-        const datePickerInitialDataPromise = await datePicker.methods.loadInitialData({
-            // setup config options for date-picker
-            selectableDatesSetting: "custom",
-            initialViewRowsToShow: 2,
-            customSelectableDatesCallback: getAvailableDates,
-            preSelectedDate: preSelectedSlot ? preSelectedSlot.date : preSelectedSlot,
-        });
-
-        // Get pricingByDayUpcharge needed for Pricing By Day
-        const pricingByDayUpchargePartPromise = showPricingByDay
-            ? getPricingByDayPartWithPrice()
-            : null;
-
-        const premiumFeePromise = baseMixin.methods.dispatchStoreActionWithLogging(
-            storeActions.GET_MOBILE_PREMIUM_FEE,
-            null,
-            "schedule"
-        );
-        const premiumFeeWithPricePromise = premiumFeePromise.then((result) => {
-            if (result.data) {
-                return baseMixin.methods.dispatchStoreActionWithLogging(
-                    storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
-                    {
-                        availableLineItems: [result.data],
-                    },
-                    "schedule",
-                    false
-                );
-            } else {
-                return result.data;
-            }
-        });
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-            {
-                resultKey: "alertReasons",
-                promise: alertReasonsPromise,
-            },
-            {
-                resultKey: "datePickerInitialData",
-                promise: datePickerInitialDataPromise,
-            },
-            {
-                resultKey: "pricingByDayUpchargePart",
-                promise: pricingByDayUpchargePartPromise,
-            },
-            {
-                resultKey: "premiumFeeWithPrice",
-                promise: premiumFeeWithPricePromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        const pricingByDayUpcharge = showPricingByDay
-            ? await baseMixin.methods.getTotalLineItemPrice(
-                  resultMap.pricingByDayUpchargePart,
-                  false
-              )
-            : null;
-
-        const datePickerInitialData = resultMap.datePickerInitialData;
-        datePickerInitialData.pricingByDayBasePrice = pricingByDayBasePrice;
-        datePickerInitialData.pricingByDayUpcharge = pricingByDayUpcharge;
-
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.$refs.datePicker.initializeComponent(datePickerInitialData);
-            vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
-            vm.selectableDatesData = datePickerInitialData.initialShopTimeSlotsResponse;
-            vm.mobilePremiumAppointmentFee = resultMap.premiumFeeWithPrice
-                ? resultMap.premiumFeeWithPrice[0]
-                : null;
-            vm.updateFooterButtonText(vm.selectedTimeSlotInfo);
-            vm.setDisplayWaitList();
-            vm.pricingByDayUpchargeLineItem = resultMap.pricingByDayUpchargePart;
-            vm.includePricingByDayUpcharge = includePricingByDayUpcharge;
-            vm.isPricingByDayExperiment = isPricingByDayExperiment;
-            vm.pricingByDayBasePrice = pricingByDayBasePrice;
-            vm.pricingByDayUpcharge = pricingByDayUpcharge;
-            vm.showPricingByDay = showPricingByDay;
-        });
-    },
-    mounted() {
-        this.$nextTick(() => {
-            const selectableDatesData = this.selectableDatesData;
-            // if no date selected on load
-            if (!this.selectedDate) {
-                if (selectableDatesData?.days?.length > 0) {
-                    this.selectedDate = selectableDatesData.days[0].date;
-                } else {
-                    setTimeout(() => {
-                        this.$refs.datePicker.showAnotherMonth().then((moreSelectableDatesData) => {
-                            this.selectableDatesData = moreSelectableDatesData;
-                            if (selectableDatesData?.days?.length > 0) {
-                                this.selectedDate = selectableDatesData.days[0].date;
-                            }
-
-                            this.setDisplayWaitList();
-                        });
-                    }, 50);
-                }
-            }
-        });
-    },
-    computed: {
-        ChangeShopLinkText() {
-            return this.getCmsContent("ChangeShopLink", "Text");
-        },
-        ChangeShopLink() {
-            // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
-            return this.splitCopyOnCMSPlaceHolder(this.ChangeShopLinkText);
-        },
-        appointmentType() {
-            return this.$store.getters.order.serviceLocation.appointmentType;
-        },
-        timeSlotsForSelectedDate() {
-            if (!this.selectedDate) return null;
-
-            return this.selectableDatesData.days?.find(
-                (selectableDate) => selectableDate.date === this.selectedDate
-            );
-        },
-    },
-    methods: {
-        splitCopyOnCMSPlaceHolder,
-        arePagePrerequisitesValid() {
-            const serviceLocation = store.getters.order.serviceLocation;
-
-            const serviceLocationPreReqs =
-                serviceLocation.zipCode &&
-                serviceLocation.zipCodeCtu &&
-                serviceLocation.appointmentType &&
-                (serviceLocation.appointmentType === AppointmentTypeStrings.MOBILE ||
-                    serviceLocation.provider.providerNumber);
-
-            const paymentInfo = store.getters.payment.isInsurance !== null;
-
-            const damageInfo =
-                store.getters.order.damage.isRepair ||
-                (store.getters.order.lineItems?.glassParts != null &&
-                    store.getters.order.lineItems.glassParts.length > 0);
-
-            const preReqResult = serviceLocationPreReqs && paymentInfo && damageInfo;
-
-            // prettier-ignore
-            {
-                debugLog("--- schedule.vue pagePrereqs start ---", null, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.zipCode:", serviceLocation.zipCode, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.zipCodeCtu:", serviceLocation.zipCodeCtu, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.appointmentType:", serviceLocation.appointmentType, !preReqResult);
-                debugLog("store.getters.order.serviceLocation.provider.providerNumber:", serviceLocation.provider?.providerNumber, !preReqResult);
-                debugLog("store.getters.payment.isInsurance:", store.getters.payment?.isInsurance, !preReqResult);
-                debugLog("store.getters.order.damage.isRepair:", store.getters.order.damage?.isRepair, !preReqResult);
-                debugLog("store.getters.order.lineItems.glassParts:", store.getters.order.lineItems?.glassParts, !preReqResult);
-                debugLog("--- schedule.vue pagePrereqs end ---", null, !preReqResult);
-            }
-            return preReqResult;
-        },
-        async getAvailableDatesMethod(startDate, endDate) {
-            const newShopTimeSlots = await getAvailableDates(
-                startDate,
-                endDate,
-                this.appointmentType,
-                this.$store.getters.order.serviceLocation.provider.providerNumber
-            );
-
-            // ADD API CALL RESULTS TO EXISTING DATE DATA
-            this.selectableDatesData.days = this.selectableDatesData.days.concat(
-                newShopTimeSlots.days
-            );
-            return newShopTimeSlots;
-        },
-        getAvailableDates,
-        getServiceZipCtuCodeFromStore() {
-            return store.getters.order.serviceLocation.zipCodeCtu;
-        },
-        getSelectedDate() {
-            return store.getters.order.schedule.date;
-        },
-        getSelectedTimeSlotInfo() {
-            const supportingItems = this.getSupportingItems();
-
-            var isPremiumAppointment = false;
-            if (supportingItems) {
-                isPremiumAppointment =
-                    !!supportingItems.filter(
-                        (lineItem) => lineItem.partType === PREMIUM_FEE_PART_TYPE
-                    ).length > 0;
-            }
-
-            const selectedTimeSlotInfo = {
-                timeSlot: store.getters.order.schedule,
-                isPremiumAppointment: isPremiumAppointment,
-            };
-
-            return selectedTimeSlotInfo;
-        },
-        getSupportingItems() {
-            return store.getters.lineItems.supportingItems;
-        },
-        updateFooterButtonText(timeSlotInfo) {
-            let navbarButtonText;
-            if (!timeSlotInfo || !timeSlotInfo.timeSlot.date) {
-                navbarButtonText = "Continue";
-            } else {
-                navbarButtonText = `Select ${this.convertSelectedDateToShortMonthAndDay(
-                    timeSlotInfo.timeSlot.date
-                )}`;
-
-                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime
-                    )}`;
-                } else if (
-                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                    !timeSlotInfo.isPremiumAppointment
-                ) {
-                    navbarButtonText += ` at ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.startTime,
-                        true
-                    )} - ${this.getDisplayTextForMilitaryTime(
-                        timeSlotInfo.timeSlot.endTime,
-                        true
-                    )}`;
-                }
-            }
-            this.$refs.navbar.updateButtonText(navbarButtonText);
-        },
-        convertSelectedDateToShortMonthAndDay(selectedDate) {
-            // This conversion ensures we don't get get GMT induced date changes
-            const dateObject = convertDateStringToDate(selectedDate);
-            // Ex: April 25
-            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
-        },
-        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
-            // Expected input: "HH:MM"
-            let hours = parseInt(militaryTimeInput.split(":")[0]);
-            const minutes = militaryTimeInput.split(":")[1];
-            const meridianNotation = hours > 11 ? "PM" : "AM";
-
-            if (hours > 12) {
-                hours -= 12;
-            }
-
-            if (shouldTrimMinutesIfEmpty && minutes === "00") {
-                return `${hours} ${meridianNotation}`;
-            } else {
-                return `${hours}:${minutes} ${meridianNotation}`;
-            }
-        },
-        backButtonAction() {
-            this.$router.navigateWithoutSaving(
-                this.navigationScenarios.CLICKED_BACK,
-                this.pageName
-            );
-        },
-        forwardButtonAction() {
-            this.updateSupportingItems();
-
-            if (this.displayWaitList) {
-                var gaLabel = "";
-                const status = this.waitListRequested ? "checked" : "unchecked";
-                const type = store.getters.isMobileAppointment ? "mobile" : "inshop";
-                gaLabel = `${status}_${type}`;
-
-                const currentDate = new Date();
-                const dateString = this.selectableDatesData.days[0].date;
-                const [year, month, day] = dateString.split("-").map(Number);
-                const appointmentDate = new Date(year, month - 1, day);
-                const timeDifference = appointmentDate - currentDate;
-
-                // Convert the time difference from milliseconds to days
-                const daysUntilAppointment = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
-
-                gaLabel +=
-                    "_" +
-                    daysUntilAppointment.toString() +
-                    "_" +
-                    store.getters.order.serviceLocation.zipCode +
-                    "_" +
-                    store.getters.order.serviceLocation.zipCodeCtu;
-                this.pushEventToGA("waitlist", "add_to_waitlist_check_box_status", gaLabel, true);
-            }
-            if (this.selectedTimeSlotInfo.timeSlot.jobMinMinutes == null) {
-                this.selectedTimeSlotInfo.timeSlot.jobMinMinutes =
-                    this.selectableDatesData?.estimatedServiceMinutesMinimum?.toString();
-                this.selectedTimeSlotInfo.timeSlot.jobMaxMinutes =
-                    this.selectableDatesData?.estimatedServiceMinutesMaximum?.toString();
-            }
-
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_SCHEDULE,
-                this.selectedTimeSlotInfo.timeSlot,
-                false
-            );
-
-            if (this.waitListRequested !== null && this.waitListRequested !== undefined) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_WAITLIST_REQUESTED,
-                    this.waitListRequested,
-                    false
-                );
-            }
-
-            this.$router.navigateWithSaving(
-                this.navigationScenarios.CLICKED_FORWARD,
-                this.pageName
-            );
-        },
-        setDisplayWaitList() {
-            if (
-                experimentMixin.methods.hasSettingEqualTo(
-                    experimentSettings.DISPLAY_WAITLIST,
-                    "true"
-                ) &&
-                this.selectableDatesData.days[0]
-            ) {
-                const dateString = this.selectableDatesData.days[0].date;
-                const [year, month, day] = dateString.split("-").map(Number);
-                const targetDate = new Date(year, month - 1, day);
-                const currentDate = new Date();
-                const futureDate = new Date(currentDate);
-                const experimentThresholdDays = experimentMixin.methods.hasSetting(
-                    experimentSettings.WAITLIST_THRESHOLD_DAYS
-                )
-                    ? parseInt(
-                          experimentMixin.methods.getSettingValue(
-                              experimentSettings.WAITLIST_THRESHOLD_DAYS
-                          )
-                      )
-                    : 0;
-                futureDate.setDate(currentDate.getDate() + experimentThresholdDays);
-
-                if (targetDate >= futureDate) {
-                    this.displayWaitList = true;
-                } else {
-                    this.displayWaitList = false;
-                }
-            }
-        },
-        updateSupportingItems() {
-            const supportingItems = this.getSupportingItems();
-
-            // if we have a pricing by day upcharge, then save/update supporting items with it
-            const pricingByDayUpchargeFeeIndex = supportingItems?.findIndex(
-                (item) => item.partType == PRICING_BY_DAY_PART_TYPE
-            );
-
-            if (this.includePricingByDayUpcharge && this.showPricingByDay) {
-                if (pricingByDayUpchargeFeeIndex && pricingByDayUpchargeFeeIndex > -1) {
-                    supportingItems[pricingByDayUpchargeFeeIndex].laborAmount =
-                        this.pricingByDayUpchargeLineItem.laborAmount;
-                    supportingItems[pricingByDayUpchargeFeeIndex].sellingPrice =
-                        this.pricingByDayUpchargeLineItem.sellingPrice;
-                    supportingItems[pricingByDayUpchargeFeeIndex].kitPrice =
-                        this.pricingByDayUpchargeLineItem.kitPrice;
-                } else {
-                    supportingItems.push(this.pricingByDayUpchargeLineItem);
-                }
-            } else {
-                if (pricingByDayUpchargeFeeIndex >= 0) {
-                    // remove pricing by day upcharge if it already was in store
-                    supportingItems.splice(pricingByDayUpchargeFeeIndex, 1);
-                }
-            }
-
-            // if we have a premium fee(early bird), then save/update supporting items
-            if (
-                this.appointmentType === AppointmentTypeStrings.MOBILE &&
-                this.selectedTimeSlotInfo?.isPremiumAppointment
-            ) {
-                const premiumFeeIndex = supportingItems.findIndex(
-                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
-                );
-
-                if (premiumFeeIndex > -1) {
-                    supportingItems[premiumFeeIndex].laborAmount =
-                        this.mobilePremiumAppointmentFee.laborAmount;
-                    supportingItems[premiumFeeIndex].sellingPrice =
-                        this.mobilePremiumAppointmentFee.sellingPrice;
-                    supportingItems[premiumFeeIndex].kitPrice =
-                        this.mobilePremiumAppointmentFee.kitPrice;
-                } else {
-                    supportingItems.push(this.mobilePremiumAppointmentFee);
-                }
-            } else {
-                if (!supportingItems) {
-                    return;
-                }
-
-                // if it's not a mobile and/or premium early bird, then make sure we remove any that may have been added
-                const removePremiumFeeIndex = supportingItems.findIndex(
-                    (item) => item.partType == PREMIUM_FEE_PART_TYPE
-                );
-
-                if (removePremiumFeeIndex >= 0) {
-                    supportingItems.splice(removePremiumFeeIndex, 1);
-                }
-            }
-
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                supportingItems,
-                false
-            );
-        },
-        handleWaitListRequested(value) {
-            this.waitListRequested = value;
-        },
-        handleDateClicked(date) {
-            // do something to mark this as upcharge day or not...
-            if (date.isPricingByDayUpchargeDay) {
-                this.includePricingByDayUpcharge = true;
-            } else {
-                this.includePricingByDayUpcharge = false;
-            }
-        },
-        updateTimeSlot(timeSlot) {
-            this.selectedTimeSlotInfo = timeSlot;
-        },
-    },
-    watch: {
-        selectedDate(newValue, oldValue) {
-            // Clear time slot selection if date selected changes
-            if (newValue !== oldValue) {
-                this.selectedTimeSlotInfo = {
-                    timeSlot: {
-                        date: null,
-                        routeCode: null,
-                        startTime: null,
-                        endTime: null,
-                        jobMaxMinutes: null,
-                        jobMinMinutes: null,
-                    },
-                    isPremiumAppointment: null,
-                };
-            }
-        },
-        selectedTimeSlotInfo(newValue) {
-            this.updateFooterButtonText(newValue);
-        },
-    },
-    components: {
-        funnelHeader,
-        navbar,
-        funnelSubHeader,
-        Form,
-        loadingModal,
-        datePicker,
-        locationAlerts,
-        textBlock,
-    },
-};
-</script>
-
-<style lang="scss">
-.container-fluid {
-    &.page-schedule {
-        padding: 0 1rem;
-        .text-link-small {
-            a,
-            .btn-link {
-                width: auto;
-                margin: 0 auto;
-                height: auto;
-                font-size: 0.875rem;
-                line-height: 1.75;
-                padding: 0;
-                border-radius: 0;
-                &:focus {
-                    outline: 1px solid $blue;
-                }
-                @include media-breakpoint-up(md) {
-                    font-size: 1rem;
-                }
-            }
-        }
-        .funnel-sub-header {
-            h5.dark-header {
-                margin-bottom: 0.25rem;
-            }
-        }
-        .change-location a {
-            font-family: AvertaSemibold;
-        }
-        .time-slots-question {
-            padding: 0 0.75rem;
-        }
-    }
-}
-</style>
-
--->
-
-<!-- OLD SCHEDULE ENDS -->
-
-
-<!-- NEW SCHEDULE BEGINS -->
-
-<!-- 
-
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
@@ -1656,8 +866,4 @@ export default {
         }
     }
 }
-</style>
+</style>
-
--->
-
-<!-- NEW SCHEDULE ENDS -->

src/layouts/service-location/service-location-june-2025.vue

@@ -0,0 +1,850 @@
+<!-- OLD SERVICE LOCATION BEGINS -->
+
+<!-- TODO: REMOVE THIS FILE ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED -->
+
+<template>
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4 mt-4">
+                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+                    <serviceZipModalQuestion
+                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
+                        v-model="serviceZipCodeQuestion"
+                        ref="serviceZipCodeQuestion"
+                        :carId="carId"
+                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
+                        :mobileFeePart="mobileFeePart"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-recycle-fee-part="setRecycleFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="setContainsMilitaryBase"
+                        @updated-bill-to-account-number="setBillToAccountNumber"
+                        linkWidgetName="ServiceZipLinkWidget"
+                        modalWidgetName="ServiceZipModalWidget" />
+
+                    <alert
+                        ref="alertMilitaryBaseZip"
+                        class="my-5"
+                        cmsWidgetName="AlertMilitaryBaseZipWidget"
+                        v-if="displayMilitaryZipAlert"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertMobileOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileOnlyWidget"
+                        v-if="displayServiceableMobileOnly"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertRecalNoMobile"
+                        class="my-5"
+                        cmsWidgetName="AlertRecalNoMobileWidget"
+                        v-if="displayRecalibrationWarning"
+                        @text-link-clicked="openModalAction"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertInshopOnly"
+                        class="my-5"
+                        cmsWidgetName="AlertInshopOnlyWidget"
+                        v-if="displayServiceableInshopOnly"
+                        alertClass="alert-warning" />
+
+                    <alert
+                        ref="alertNoShops"
+                        class="my-5"
+                        cmsWidgetName="AlertNoShopsWidget"
+                        v-if="displayNoShopsAlert"
+                        alertClass="alert-warning" />
+                    <alert
+                        ref="alertMobileFeeFree"
+                        class="my-5"
+                        cmsWidgetName="AlertMobileFeeFreeWidget"
+                        v-if="showMobileFreeAlert"
+                        alertClass="alert-success" />
+                </div>
+            </div>
+            <div class="row justify-content-center appointment-type">
+                <div class="col-md-6">
+                    <appointmentTypeQuestion
+                        v-model="selectedAppointmentType"
+                        v-show="isAppointmentTypeDisplayed"
+                        :isServiceableMobile="isServiceableMobile"
+                        :isServiceableInshop="isServiceableInshop"
+                        :isServiceableDropoff="isServiceableDropoff"
+                        :isDisplayed="isAppointmentTypeDisplayed"
+                        :mobileFeeApplies="mobileFeeApplies"
+                        :zipCode="zipCode"
+                        ref="appointmentTypeQuestion"
+                        groupName="appointmentTypeQuestion"
+                        cmsWidgetName="AppointmentTypeQuestionWidget"
+                        validationRules="option-required"
+                        labelBold="true" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <mobileLocationModalQuestions
+                        customComponentId="mobileLocationQuestions"
+                        v-show="selectedAppointmentType === 'Mobile'"
+                        v-model="mobileLocationQuestions"
+                        :mobileFeePart="mobileFeePart"
+                        :mobileFeeApplies="mobileFeeApplies"
+                        @updated-mobile-fee-part="setMobileFeePart"
+                        @updated-recycle-fee-part="setRecycleFeePart"
+                        @updated-serviceability="setServiceabilityDetails"
+                        @updated-contains-military-base="setContainsMilitaryBase"
+                        @updated-mobile-ctu="setCtuForMobile"
+                        validationRules="mobile-location-required"
+                        ref="mobileLocationQuestions"
+                        linkWidgetName="MobileLocationLinkWidget"
+                        modalWidgetName="MobileLocationModalWidget"
+                        @setMobileLocation="setMobileLocationQuestions"
+                        @set-mobile-location-invalid="setMobileLocationInValid" />
+
+                    <shopQuestion
+                        ref="shopQuestion"
+                        v-show="isShopQuestionDisplayed"
+                        v-model="selectedProvider"
+                        :selectedAppointmentType="selectedAppointmentType"
+                        :shopProviderData="shopProviderData"
+                        :isDisplayed="isShopQuestionDisplayed"
+                        cmsWidgetName="ShopQuestionWidget" />
+
+                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
+
+                    <navbar
+                        cmsWidgetName="FunnelFooterWidget"
+                        ref="navbar"
+                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
+                        @back-clicked="backButtonAction"
+                        @ForwardClicked="forwardButtonAction" />
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import alert from "@/ux-components/alert/alert";
+import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
+import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
+import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
+import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
+
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import { Form } from "vee-validate";
+import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
+
+// Supporting files
+import baseMixin from "@/mixins/base-mixin.js";
+import experimentMixin from "@/mixins/experiment-mixin.js";
+import { experimentSettings } from "@/constants/experiments";
+import { AppointmentTypeStrings } from "@/constants/schedule-constants";
+
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import {
+    getPricedMobileFeePart,
+    getServiceabilityDetails,
+    getShopProviderData,
+    getZipCodeData,
+} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { applicationConfig } from "@/constants/application-config";
+import { Provider } from "@/layouts/service-location/classes/provider";
+import { partNumberStrings } from "@/constants/part-number-strings";
+
+import store from "@/store";
+
+// Validation
+import { defineRule } from "vee-validate";
+import { errorMessages } from "@/constants/error-messages";
+
+const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
+
+// DEFINE VALIDATION RULES
+defineRule("mobile-location-required", (value) => {
+    const addressQuestionsValues = Object.values(
+        [
+            value.addressQuestions.streetAddress,
+            value.addressQuestions.city,
+            value.isVehicleProtected,
+        ] || {}
+    );
+    const filledFields = addressQuestionsValues.filter(
+        (val) => val !== null && val !== undefined && val !== ""
+    );
+    if (
+        value.isMobileSelected &&
+        filledFields.length > 0 &&
+        filledFields.length < addressQuestionsValues.length
+    ) {
+        return errorMessages.MOBILE_LOCATION_REQUIRED;
+    }
+    return true;
+});
+
+export default {
+    name: "service-location",
+    data() {
+        return {
+            streetAddress: this.getServiceAddressFromStore(),
+            apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
+            carId: this.getCarIdfromStore(),
+            city: this.getServiceCityFromStore(),
+            state: this.getServiceStateFromStore(),
+            zipCode: this.getServiceZipCodeFromStore(),
+            isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
+            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
+            isGlassServiceableInshop: null,
+            isRecalibrationServiceableInshop: null,
+            isGlassServiceableDropoff: null,
+            isRecalibrationServiceableDropoff: null,
+            isGlassServiceableMobile: null,
+            isRecalibrationServiceableMobile: null,
+            selectedAppointmentType: this.getSelectedAppointmentType(),
+            selectedProvider: this.getSelectedProvider(),
+            mobileFeePart: null,
+            recycleFeePart: null,
+            zipContainsMilitaryBase: false,
+            zipCodeCtu: null,
+            billToAccountNumber: null,
+            shopProviderData: null,
+            navigatingForward: false,
+            isMobileAddressValid: true,
+        };
+    },
+    async beforeRouteEnter(to, from, next) {
+        // Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.name);
+
+        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
+        const zipCodeDataPromise = getZipCodeData(serviceZipCode);
+
+        const serviceabilityDetailsPromise = getServiceabilityDetails(
+            serviceZipCode,
+            null,
+            "service-location"
+        );
+
+        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
+
+        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
+
+        // Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+            {
+                resultKey: "zipCodeData",
+                promise: zipCodeDataPromise,
+            },
+            {
+                resultKey: "mobileFeePart",
+                promise: mobileFeePartPromise,
+            },
+            {
+                resultKey: "serviceabilityDetails",
+                promise: serviceabilityDetailsPromise,
+            },
+            {
+                resultKey: "shopProviderData",
+                promise: shopProviderDataPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        // Call the "next" function to complete the transition to this page.
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+            vm.setData(
+                resultMap.zipCodeData,
+                resultMap.serviceabilityDetails,
+                resultMap.mobileFeePart,
+                resultMap.shopProviderData
+            );
+        });
+    },
+    computed: {
+        serviceZipCodeQuestion: {
+            get: function () {
+                return {
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: this.zipCodeCtu,
+                };
+            },
+            set: function (newValue) {
+                if (newValue.zipCode !== this.zipCode) {
+                    this.resetMobileLocation();
+                    this.selectedAppointmentType = null;
+                    this.selectedProvider = new Provider();
+                }
+
+                this.state = newValue.state;
+                this.zipCode = newValue.zipCode;
+                this.zipCodeCtu = newValue.zipCodeCtu;
+
+                this.$nextTick();
+            },
+        },
+        mobileLocationQuestions: {
+            get: function () {
+                return {
+                    addressQuestions: {
+                        streetAddress: this.streetAddress,
+                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
+                        city: this.city,
+                        state: this.state,
+                        zipCode: this.zipCode,
+                    },
+                    isVehicleProtected: this.isVehicleProtected,
+                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
+                };
+            },
+        },
+        isServiceableMobile() {
+            if (this.isRecalibrationServiceableMobile !== null) {
+                return (
+                    (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
+                    this.isMobileStaticRecalibrationApplicable
+                );
+            } else {
+                return this.isGlassServiceableMobile;
+            }
+        },
+        isMobileStaticRecalibrationApplicable() {
+            return (
+                this.displayMSR &&
+                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
+                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
+            );
+        },
+        displayMSR() {
+            return (
+                experimentMixin.methods
+                    .getSettingValue(experimentSettings.DISPLAY_MSR)
+                    ?.toLowerCase() === "true"
+            );
+        },
+        isCashItacNoComp() {
+            return !this.isInsurance || this.isITAC || this.isNoComp;
+        },
+        mobileFeeHasPrice() {
+            return (
+                this.mobileFeePart?.laborAmount > 0 ||
+                this.mobileFeePart?.sellingPrice > 0 ||
+                this.mobileFeePart?.kitPrice > 0
+            );
+        },
+        mobileFeeApplies() {
+            if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
+                return this.isCashItacNoComp;
+            } else {
+                return this.mobileFeeHasPrice;
+            }
+        },
+        showMobileFreeAlert() {
+            if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
+                return true;
+            }
+            return false;
+        },
+        isServiceableInshop() {
+            if (this.isRecalibrationServiceableInshop !== null) {
+                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
+            } else {
+                return this.isGlassServiceableInshop;
+            }
+        },
+        isServiceableDropoff() {
+            if (this.isRecalibrationServiceableDropoff !== null) {
+                return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
+            } else {
+                return this.isGlassServiceableDropoff;
+            }
+        },
+        isShopQuestionDisplayed() {
+            return (
+                this.selectedAppointmentType === "Inshop" ||
+                this.selectedAppointmentType === "Dropoff"
+            );
+        },
+        isAppointmentTypeDisplayed() {
+            return this.zipCode && !this.displayNoShopsAlert;
+        },
+        requiresInshopRecalibration() {
+            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
+            return (
+                this.isServiceableInshop &&
+                this.isGlassServiceableMobile &&
+                this.isRecalibrationServiceableMobile === false &&
+                !this.isMobileStaticRecalibrationApplicable
+            );
+        },
+        displayRecalibrationWarning() {
+            return this.requiresInshopRecalibration;
+        },
+        displayServiceableInshopOnly() {
+            return (
+                !this.displayRecalibrationWarning &&
+                this.isServiceableInshop &&
+                !this.isServiceableMobile
+            );
+        },
+        displayMilitaryZipAlert() {
+            return this.zipContainsMilitaryBase && this.isServiceableMobile;
+        },
+        displayServiceableMobileOnly() {
+            return this.isServiceableMobile && !this.isServiceableInshop;
+        },
+        displayNoShopsAlert() {
+            return !this.isServiceableInshop && !this.isServiceableMobile;
+        },
+        recalibrationInformationModal() {
+            return this.$refs.recalibrationInformationModal;
+        },
+        isInsurance() {
+            return store.getters.payment.isInsurance;
+        },
+        isITAC() {
+            return store.getters.order.policy.isItac;
+        },
+        isNoComp() {
+            return store.getters.order.policy.isNoComp;
+        },
+        isForwardActionDisabled() {
+            return this.displayNoShopsAlert || !this.isMobileAddressValid;
+        },
+    },
+    methods: {
+        arePagePrerequisitesValid() {
+            // insurance drops the recycle fee on replace orders so it won't be in supportingItems
+            if (store.getters.payment.isInsurance) {
+                if (
+                    store.getters.payment.parentAccountNumber !==
+                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
+                    store.getters.order.policy.policyNumber &&
+                    store.getters.order.serviceLocation.zipCode
+                ) {
+                    return true;
+                } else {
+                    // prettier-ignore
+                    {
+                        console.log(new Date() + "Insurance: servce-location invalid prereqs");
+                        console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
+                        console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
+                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
+                    }
+
+                    return false;
+                }
+            } else {
+                if (
+                    store.getters.lineItems.supportingItems &&
+                    store.getters.order.serviceLocation.zipCode
+                ) {
+                    return true;
+                } else {
+                    // prettier-ignore
+                    {
+                        console.log(new Date() + "Cash: servce-location invalid prereqs");
+                        console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
+                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
+                    }
+                    return false;
+                }
+            }
+        },
+        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
+            if (zipCodeData) {
+                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
+                this.zipCodeCtu = zipCodeData.zipCodeCtu;
+            }
+
+            if (serviceabilityDetails) {
+                this.setServiceabilityDetails(serviceabilityDetails);
+            }
+
+            if (mobileFeePart) {
+                this.mobileFeePart = mobileFeePart;
+            }
+
+            if (shopProviderData) {
+                this.shopProviderData = shopProviderData;
+            }
+
+            var gaLabel = this.GaLabels.NO;
+            if (this.isServiceableMobile) {
+                gaLabel = this.GaLabels.YES;
+            }
+
+            this.pushEventToGA(
+                this.GaCategories.APPOINTMENT,
+                this.GaActions.MOBILE_AVAILABLE,
+                gaLabel,
+                true
+            );
+        },
+        setContainsMilitaryBase(val) {
+            if (this.zipContainsMilitaryBase !== val) {
+                this.zipContainsMilitaryBase = val;
+            }
+        },
+        setBillToAccountNumber(val) {
+            this.billToAccountNumber = val;
+        },
+        setCtuForMobile(val) {
+            this.zipCodeCtu = val;
+        },
+        setMobileFeePart(mobileFeePart) {
+            this.mobileFeePart = mobileFeePart;
+        },
+        setRecycleFeePart(recycleFeePart) {
+            this.recycleFeePart = recycleFeePart;
+        },
+        //creating async function as the computed property can not directly handle asynchronous operations or promises.
+        async setMobileLocationQuestions(newValue) {
+            var newZipCode = newValue.addressQuestions.zipCode;
+            if (newZipCode !== this.zipCode) {
+                await getShopProviderData(newZipCode).then((result) => {
+                    if (this.isServiceableMobile) {
+                        this.shopProviderData = result.data;
+                        this.selectedProvider = new Provider(
+                            this.shopProviderData.mobileProviderNumber
+                        );
+                    }
+                });
+            }
+            if (this.isServiceableMobile) {
+                this.setMobileLocation(newValue);
+                this.setMobileLocationInValid(false);
+            } else {
+                await getZipCodeData(newZipCode).then((zipCodeData) => {
+                    this.serviceZipCodeQuestion = {
+                        state: zipCodeData.state,
+                        zipCode: newZipCode,
+                        zipCodeCtu: zipCodeData.zipCodeCtu,
+                    };
+                });
+            }
+        },
+        getCarIdfromStore() {
+            return store.getters.vehicle.carId;
+        },
+        getServiceAddressFromStore() {
+            return store.getters.order.serviceLocation.address;
+        },
+        getServiceAddress2FromStore() {
+            return store.getters.order.serviceLocation.address2;
+        },
+        getServiceCityFromStore() {
+            return store.getters.order.serviceLocation.city;
+        },
+        getServiceStateFromStore() {
+            return store.getters.order.serviceLocation.state;
+        },
+        getServiceZipCodeFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getIsVehicleHeavyTruckFromStore() {
+            return store.getters.order.vehicle?.isBigTruck ?? false;
+        },
+        getIsVehicleProtectedFromStore() {
+            return store.getters.order.serviceLocation.isVehicleProtected;
+        },
+        getSelectedAppointmentType() {
+            return store.getters.order.serviceLocation.appointmentType;
+        },
+        getSelectedProvider() {
+            return store.getters.order.serviceLocation.provider;
+        },
+        resetMobileLocation() {
+            this.streetAddress = "";
+            this.apartmentNumberOrBusinessName = "";
+            this.city = "";
+
+            this.isVehicleProtected = null;
+        },
+        setServiceabilityDetails(serviceabilityDetails) {
+            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
+            this.isRecalibrationServiceableInshop =
+                serviceabilityDetails.isRecalibrationServiceableInshop;
+            this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
+            this.isRecalibrationServiceableDropoff =
+                serviceabilityDetails.isRecalibrationServiceableDropoff;
+            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
+            this.isRecalibrationServiceableMobile =
+                serviceabilityDetails.isRecalibrationServiceableMobile;
+        },
+        setMobileLocation(mobileLocation) {
+            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
+            this.apartmentNumberOrBusinessName =
+                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
+            this.city = mobileLocation.addressQuestions.city;
+            this.state = mobileLocation.addressQuestions.state;
+            this.zipCode = mobileLocation.addressQuestions.zipCode;
+            this.isVehicleProtected = mobileLocation.isVehicleProtected;
+        },
+        async reloadShopData(zipCode) {
+            await this.$refs.shopQuestion.reloadShopData(zipCode);
+        },
+        openRecalibrationInformationModal() {
+            this.recalibrationInformationModal.openModal();
+        },
+        backButtonAction() {
+            const payment = store.getters.order.payment;
+            if (
+                payment?.isInsurance &&
+                (payment?.insuranceCoverage?.isVerified ||
+                    store.getters.order.referralNumber.length === 6)
+            ) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: false,
+                    pageNameToLog: "service-location",
+                    navType: "back",
+                });
+            } else {
+                this.$router.navigateWithoutSaving(
+                    this.navigationScenarios.CLICKED_BACK,
+                    this.pageName
+                );
+            }
+        },
+        updateAndSaveIsMSRFeeApplicable() {
+            const isMSRFeeApplicable =
+                this.isMobileStaticRecalibrationApplicable &&
+                this.selectedAppointmentType == "Mobile";
+            this.dispatchStoreAction(
+                this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
+                isMSRFeeApplicable
+            );
+        },
+        updateAndSaveSupportingItems() {
+            let supportingItems = store.getters.lineItems.supportingItems;
+            let shouldSaveSupportingItems = false;
+
+            supportingItems =
+                !supportingItems && this.isMobileStaticRecalibrationApplicable
+                    ? []
+                    : supportingItems;
+
+            // for insurance orders, fees can get removed causing supportingitems to be null or empty
+            if (!supportingItems) {
+                return;
+            }
+
+            // update recyle fee price
+            if (this.recycleFeePart) {
+                const recycleFeeIndex = supportingItems.findIndex(
+                    (item) => item.partNumber == partNumberStrings.RECYCLE_FEE
+                );
+                if (recycleFeeIndex >= 0) {
+                    supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
+                    supportingItems[recycleFeeIndex].sellingPrice =
+                        this.recycleFeePart.sellingPrice;
+                    supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;
+
+                    shouldSaveSupportingItems = true;
+                }
+            }
+
+            // if we have a mobile fee, then save/update supporting items
+            if (this.selectedAppointmentType == "Mobile") {
+                const mobileFeeIndex = supportingItems.findIndex(
+                    (item) => item.partType == MOBILE_FEE_PART_TYPE
+                );
+                // If it already exists, update the price with latest data
+                if (mobileFeeIndex >= 0) {
+                    supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
+                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
+                    supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
+                } else {
+                    if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
+                }
+
+                shouldSaveSupportingItems = true;
+            } else {
+                // if it's not a mobile, then make sure we remove any that may have been added
+                const removeMobileFeeIndex = supportingItems?.findIndex(
+                    (item) => item.partType == MOBILE_FEE_PART_TYPE
+                );
+
+                if (removeMobileFeeIndex >= 0) {
+                    supportingItems.splice(removeMobileFeeIndex, 1);
+                    shouldSaveSupportingItems = true;
+                }
+            }
+
+            // Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
+            if (shouldSaveSupportingItems) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
+                    supportingItems,
+                    false
+                );
+            }
+        },
+        async forwardButtonAction() {
+            this.navigatingForward = true;
+            var ctu = this.zipCodeCtu;
+            if (
+                this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
+                this.selectedProvider &&
+                this.selectedProvider.address
+            ) {
+                this.selectedProvider.address.streetAddress = null;
+                this.selectedProvider.address.city = null;
+                this.selectedProvider.address.state = null;
+                this.selectedProvider.address.zipCode = null;
+                this.selectedProvider.address.zipCodeCtu = null;
+            } else {
+                // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
+                // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
+                if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
+                    ctu = this.selectedProvider.address.zipCodeCtu;
+                }
+                this.resetMobileLocation();
+            }
+
+            await this.dispatchStoreAction(
+                this.storeActions.SAVE_SERVICE_LOCATION,
+                {
+                    address: this.streetAddress,
+                    address2: this.apartmentNumberOrBusinessName,
+                    city: this.city,
+                    state: this.state,
+                    zipCode: this.zipCode,
+                    zipCodeCtu: ctu,
+                    appointmentType: this.selectedAppointmentType,
+                    isVehicleProtected: this.isVehicleProtected,
+                    provider: {
+                        providerNumber: this.selectedProvider?.providerNumber,
+                        address: {
+                            streetAddress: this.selectedProvider?.address?.streetAddress,
+                            city: this.selectedProvider?.address?.city,
+                            state: this.selectedProvider?.address?.state,
+                            zipCode: this.selectedProvider?.address?.zipCode,
+                            zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
+                        },
+                    },
+                },
+                false
+            );
+
+            if (this.billToAccountNumber) {
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
+                    this.billToAccountNumber,
+                    false
+                );
+            }
+
+            this.updateAndSaveSupportingItems();
+            this.updateAndSaveIsMSRFeeApplicable();
+            this.$router.navigateWithSaving(
+                this.navigationScenarios.CLICKED_FORWARD,
+                this.pageName
+            );
+        },
+        setMobileLocationInValid(isMobileLocationInValid) {
+            this.isMobileAddressValid = !isMobileLocationInValid;
+        },
+    },
+    watch: {
+        zipCode: {
+            handler(newValue) {
+                if (!this.navigatingForward) {
+                    getShopProviderData(this.zipCode).then(async (result) => {
+                        this.shopProviderData = result.data;
+                        if (this.selectedAppointmentType === "Mobile") {
+                            this.selectedProvider = new Provider(
+                                this.shopProviderData.mobileProviderNumber
+                            );
+                        } else {
+                            this.selectedProvider = new Provider();
+                        }
+                    });
+                }
+            },
+        },
+        selectedAppointmentType: {
+            handler(newValue) {
+                if (newValue === "Mobile") {
+                    this.selectedProvider = new Provider(
+                        this.shopProviderData.mobileProviderNumber
+                    );
+                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
+                        //restore mobile address from store in case user make changes to address but not commit it.
+                        this.streetAddress = this.getServiceAddressFromStore();
+                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
+                        this.city = this.getServiceCityFromStore();
+                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
+                        this.$refs.mobileLocationQuestions.resetAlerts();
+                    } else {
+                        this.resetMobileLocation();
+                    }
+                } else {
+                    this.selectedProvider = new Provider();
+                }
+            },
+        },
+    },
+    components: {
+        alert,
+        serviceZipModalQuestion,
+        appointmentTypeQuestion,
+        mobileLocationModalQuestions,
+        funnelHeader,
+        navbar,
+        funnelSubHeader,
+        Form,
+        loadingModal,
+        contentGroupModal,
+        shopQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+.appointment-type-question {
+    .button-question {
+        .col {
+            @include media-breakpoint-up(md) {
+                padding: 0 0.75rem;
+            }
+            @include media-breakpoint-up(xl) {
+                width: 33.3333333%;
+                flex: 0 0 auto;
+            }
+        }
+    }
+}
+.question-text {
+    & > span {
+        text-align: center;
+        color: $black;
+    }
+}
+</style>
+
+
+
+<!-- OLD SERVICE LOCATION ENDS -->

src/layouts/service-location/service-location.vue

@@ -1,858 +1,3 @@
-<!-- OLD SERVICE LOCATION BEGINS -->
-
-
-<template>
-    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
-        <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles">
-            <div class="row justify-content-center">
-                <div class="col-md-6">
-                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4 mt-4">
-                    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
-
-                    <serviceZipModalQuestion
-                        editScreenReaderTextCmsWidgetName="ScreenReaderZipEditWidget"
-                        v-model="serviceZipCodeQuestion"
-                        ref="serviceZipCodeQuestion"
-                        :carId="carId"
-                        :isVehicleHeavyTruck="isVehicleHeavyTruck"
-                        :mobileFeePart="mobileFeePart"
-                        @updated-mobile-fee-part="setMobileFeePart"
-                        @updated-recycle-fee-part="setRecycleFeePart"
-                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        @updated-bill-to-account-number="setBillToAccountNumber"
-                        linkWidgetName="ServiceZipLinkWidget"
-                        modalWidgetName="ServiceZipModalWidget" />
-
-                    <alert
-                        ref="alertMilitaryBaseZip"
-                        class="my-5"
-                        cmsWidgetName="AlertMilitaryBaseZipWidget"
-                        v-if="displayMilitaryZipAlert"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertMobileOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertMobileOnlyWidget"
-                        v-if="displayServiceableMobileOnly"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertRecalNoMobile"
-                        class="my-5"
-                        cmsWidgetName="AlertRecalNoMobileWidget"
-                        v-if="displayRecalibrationWarning"
-                        @text-link-clicked="openModalAction"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertInshopOnly"
-                        class="my-5"
-                        cmsWidgetName="AlertInshopOnlyWidget"
-                        v-if="displayServiceableInshopOnly"
-                        alertClass="alert-warning" />
-
-                    <alert
-                        ref="alertNoShops"
-                        class="my-5"
-                        cmsWidgetName="AlertNoShopsWidget"
-                        v-if="displayNoShopsAlert"
-                        alertClass="alert-warning" />
-                    <alert
-                        ref="alertMobileFeeFree"
-                        class="my-5"
-                        cmsWidgetName="AlertMobileFeeFreeWidget"
-                        v-if="showMobileFreeAlert"
-                        alertClass="alert-success" />
-                </div>
-            </div>
-            <div class="row justify-content-center appointment-type">
-                <div class="col-md-6">
-                    <appointmentTypeQuestion
-                        v-model="selectedAppointmentType"
-                        v-show="isAppointmentTypeDisplayed"
-                        :isServiceableMobile="isServiceableMobile"
-                        :isServiceableInshop="isServiceableInshop"
-                        :isServiceableDropoff="isServiceableDropoff"
-                        :isDisplayed="isAppointmentTypeDisplayed"
-                        :mobileFeeApplies="mobileFeeApplies"
-                        :zipCode="zipCode"
-                        ref="appointmentTypeQuestion"
-                        groupName="appointmentTypeQuestion"
-                        cmsWidgetName="AppointmentTypeQuestionWidget"
-                        validationRules="option-required"
-                        labelBold="true" />
-                </div>
-            </div>
-            <div class="row justify-content-center">
-                <div class="col-md-6 col-xl-4">
-                    <mobileLocationModalQuestions
-                        customComponentId="mobileLocationQuestions"
-                        v-show="selectedAppointmentType === 'Mobile'"
-                        v-model="mobileLocationQuestions"
-                        :mobileFeePart="mobileFeePart"
-                        :mobileFeeApplies="mobileFeeApplies"
-                        @updated-mobile-fee-part="setMobileFeePart"
-                        @updated-recycle-fee-part="setRecycleFeePart"
-                        @updated-serviceability="setServiceabilityDetails"
-                        @updated-contains-military-base="setContainsMilitaryBase"
-                        @updated-mobile-ctu="setCtuForMobile"
-                        validationRules="mobile-location-required"
-                        ref="mobileLocationQuestions"
-                        linkWidgetName="MobileLocationLinkWidget"
-                        modalWidgetName="MobileLocationModalWidget"
-                        @setMobileLocation="setMobileLocationQuestions"
-                        @set-mobile-location-invalid="setMobileLocationInValid" />
-
-                    <shopQuestion
-                        ref="shopQuestion"
-                        v-show="isShopQuestionDisplayed"
-                        v-model="selectedProvider"
-                        :selectedAppointmentType="selectedAppointmentType"
-                        :shopProviderData="shopProviderData"
-                        :isDisplayed="isShopQuestionDisplayed"
-                        cmsWidgetName="ShopQuestionWidget" />
-
-                    <contentGroupModal ref="RecalModal" cmsWidgetName="RecalModal" />
-
-                    <navbar
-                        cmsWidgetName="FunnelFooterWidget"
-                        ref="navbar"
-                        :isForwardActionDisabled="!meta.valid || isForwardActionDisabled"
-                        @back-clicked="backButtonAction"
-                        @ForwardClicked="forwardButtonAction" />
-                </div>
-            </div>
-        </div>
-    </Form>
-</template>
-
-<script>
-// Components
-import alert from "@/ux-components/alert/alert";
-import serviceZipModalQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-modal-question";
-import mobileLocationModalQuestions from "@/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions";
-import appointmentTypeQuestion from "@/layouts/service-location/appointment-type-question/appointment-type-question";
-import shopQuestion from "@/layouts/service-location/shop-question/shop-question";
-
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import navbar from "@/fmg-components/nav-bar/nav-bar";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
-import { Form } from "vee-validate";
-import contentGroupModal from "@/fmg-components/content-group-modal/content-group-modal";
-
-// Supporting files
-import baseMixin from "@/mixins/base-mixin.js";
-import experimentMixin from "@/mixins/experiment-mixin.js";
-import { experimentSettings } from "@/constants/experiments";
-import { AppointmentTypeStrings } from "@/constants/schedule-constants";
-
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import {
-    getPricedMobileFeePart,
-    getServiceabilityDetails,
-    getShopProviderData,
-    getZipCodeData,
-} from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
-import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
-import { applicationConfig } from "@/constants/application-config";
-import { Provider } from "@/layouts/service-location/classes/provider";
-import { partNumberStrings } from "@/constants/part-number-strings";
-
-import store from "@/store";
-
-// Validation
-import { defineRule } from "vee-validate";
-import { errorMessages } from "@/constants/error-messages";
-
-const MOBILE_FEE_PART_TYPE = "MOBILE FEE";
-
-// DEFINE VALIDATION RULES
-defineRule("mobile-location-required", (value) => {
-    const addressQuestionsValues = Object.values(
-        [
-            value.addressQuestions.streetAddress,
-            value.addressQuestions.city,
-            value.isVehicleProtected,
-        ] || {}
-    );
-    const filledFields = addressQuestionsValues.filter(
-        (val) => val !== null && val !== undefined && val !== ""
-    );
-    if (
-        value.isMobileSelected &&
-        filledFields.length > 0 &&
-        filledFields.length < addressQuestionsValues.length
-    ) {
-        return errorMessages.MOBILE_LOCATION_REQUIRED;
-    }
-    return true;
-});
-
-export default {
-    name: "service-location",
-    data() {
-        return {
-            streetAddress: this.getServiceAddressFromStore(),
-            apartmentNumberOrBusinessName: this.getServiceAddress2FromStore(),
-            carId: this.getCarIdfromStore(),
-            city: this.getServiceCityFromStore(),
-            state: this.getServiceStateFromStore(),
-            zipCode: this.getServiceZipCodeFromStore(),
-            isVehicleHeavyTruck: this.getIsVehicleHeavyTruckFromStore(),
-            isVehicleProtected: this.getIsVehicleProtectedFromStore(),
-            isGlassServiceableInshop: null,
-            isRecalibrationServiceableInshop: null,
-            isGlassServiceableDropoff: null,
-            isRecalibrationServiceableDropoff: null,
-            isGlassServiceableMobile: null,
-            isRecalibrationServiceableMobile: null,
-            selectedAppointmentType: this.getSelectedAppointmentType(),
-            selectedProvider: this.getSelectedProvider(),
-            mobileFeePart: null,
-            recycleFeePart: null,
-            zipContainsMilitaryBase: false,
-            zipCodeCtu: null,
-            billToAccountNumber: null,
-            shopProviderData: null,
-            navigatingForward: false,
-            isMobileAddressValid: true,
-        };
-    },
-    async beforeRouteEnter(to, from, next) {
-        // Call APIs
-        const cmsContentPromise = fetchCmsContentForPage(to.name);
-
-        const serviceZipCode = store.getters.order.serviceLocation.zipCode;
-        const zipCodeDataPromise = getZipCodeData(serviceZipCode);
-
-        const serviceabilityDetailsPromise = getServiceabilityDetails(
-            serviceZipCode,
-            null,
-            "service-location"
-        );
-
-        const mobileFeePartPromise = getPricedMobileFeePart(serviceZipCode, "service-location");
-
-        const shopProviderDataPromise = getShopProviderData(serviceZipCode); // shopQuestion.methods.loadInitialData(serviceZipCode);
-
-        // Settle promises and get results
-        const promiseResultMap = [
-            {
-                resultKey: "cmsContent",
-                promise: cmsContentPromise,
-            },
-            {
-                resultKey: "zipCodeData",
-                promise: zipCodeDataPromise,
-            },
-            {
-                resultKey: "mobileFeePart",
-                promise: mobileFeePartPromise,
-            },
-            {
-                resultKey: "serviceabilityDetails",
-                promise: serviceabilityDetailsPromise,
-            },
-            {
-                resultKey: "shopProviderData",
-                promise: shopProviderDataPromise,
-            },
-        ];
-
-        const resultMap = await settleAllPromises(promiseResultMap);
-
-        // Call the "next" function to complete the transition to this page.
-        next((vm) => {
-            vm.setCmsContent(resultMap.cmsContent);
-            vm.setData(
-                resultMap.zipCodeData,
-                resultMap.serviceabilityDetails,
-                resultMap.mobileFeePart,
-                resultMap.shopProviderData
-            );
-        });
-    },
-    computed: {
-        serviceZipCodeQuestion: {
-            get: function () {
-                return {
-                    state: this.state,
-                    zipCode: this.zipCode,
-                    zipCodeCtu: this.zipCodeCtu,
-                };
-            },
-            set: function (newValue) {
-                if (newValue.zipCode !== this.zipCode) {
-                    this.resetMobileLocation();
-                    this.selectedAppointmentType = null;
-                    this.selectedProvider = new Provider();
-                }
-
-                this.state = newValue.state;
-                this.zipCode = newValue.zipCode;
-                this.zipCodeCtu = newValue.zipCodeCtu;
-
-                this.$nextTick();
-            },
-        },
-        mobileLocationQuestions: {
-            get: function () {
-                return {
-                    addressQuestions: {
-                        streetAddress: this.streetAddress,
-                        apartmentNumberOrBusinessName: this.apartmentNumberOrBusinessName,
-                        city: this.city,
-                        state: this.state,
-                        zipCode: this.zipCode,
-                    },
-                    isVehicleProtected: this.isVehicleProtected,
-                    isMobileSelected: this.selectedAppointmentType == AppointmentTypeStrings.MOBILE,
-                };
-            },
-        },
-        isServiceableMobile() {
-            if (this.isRecalibrationServiceableMobile !== null) {
-                return (
-                    (this.isGlassServiceableMobile && this.isRecalibrationServiceableMobile) ||
-                    this.isMobileStaticRecalibrationApplicable
-                );
-            } else {
-                return this.isGlassServiceableMobile;
-            }
-        },
-        isMobileStaticRecalibrationApplicable() {
-            return (
-                this.displayMSR &&
-                this.mobileFeePart?.partNumber == partNumberStrings.MOBILE_STATIC_RECAL_FEE &&
-                (this.isCashItacNoComp || this.mobileFeePart?.isInsurable)
-            );
-        },
-        displayMSR() {
-            return (
-                experimentMixin.methods
-                    .getSettingValue(experimentSettings.DISPLAY_MSR)
-                    ?.toLowerCase() === "true"
-            );
-        },
-        isCashItacNoComp() {
-            return !this.isInsurance || this.isITAC || this.isNoComp;
-        },
-        mobileFeeHasPrice() {
-            return (
-                this.mobileFeePart?.laborAmount > 0 ||
-                this.mobileFeePart?.sellingPrice > 0 ||
-                this.mobileFeePart?.kitPrice > 0
-            );
-        },
-        mobileFeeApplies() {
-            if (this.isMobileStaticRecalibrationApplicable && this.mobileFeeHasPrice) {
-                return this.isCashItacNoComp;
-            } else {
-                return this.mobileFeeHasPrice;
-            }
-        },
-        showMobileFreeAlert() {
-            if (this.isServiceableMobile && !this.isInsurance && !this.mobileFeeHasPrice) {
-                return true;
-            }
-            return false;
-        },
-        isServiceableInshop() {
-            if (this.isRecalibrationServiceableInshop !== null) {
-                return this.isGlassServiceableInshop && this.isRecalibrationServiceableInshop;
-            } else {
-                return this.isGlassServiceableInshop;
-            }
-        },
-        isServiceableDropoff() {
-            if (this.isRecalibrationServiceableDropoff !== null) {
-                return this.isGlassServiceableDropoff && this.isRecalibrationServiceableDropoff;
-            } else {
-                return this.isGlassServiceableDropoff;
-            }
-        },
-        isShopQuestionDisplayed() {
-            return (
-                this.selectedAppointmentType === "Inshop" ||
-                this.selectedAppointmentType === "Dropoff"
-            );
-        },
-        isAppointmentTypeDisplayed() {
-            return this.zipCode && !this.displayNoShopsAlert;
-        },
-        requiresInshopRecalibration() {
-            // Specifically check for isRecalibrationServiceableMobile === false, not null or true.
-            return (
-                this.isServiceableInshop &&
-                this.isGlassServiceableMobile &&
-                this.isRecalibrationServiceableMobile === false &&
-                !this.isMobileStaticRecalibrationApplicable
-            );
-        },
-        displayRecalibrationWarning() {
-            return this.requiresInshopRecalibration;
-        },
-        displayServiceableInshopOnly() {
-            return (
-                !this.displayRecalibrationWarning &&
-                this.isServiceableInshop &&
-                !this.isServiceableMobile
-            );
-        },
-        displayMilitaryZipAlert() {
-            return this.zipContainsMilitaryBase && this.isServiceableMobile;
-        },
-        displayServiceableMobileOnly() {
-            return this.isServiceableMobile && !this.isServiceableInshop;
-        },
-        displayNoShopsAlert() {
-            return !this.isServiceableInshop && !this.isServiceableMobile;
-        },
-        recalibrationInformationModal() {
-            return this.$refs.recalibrationInformationModal;
-        },
-        isInsurance() {
-            return store.getters.payment.isInsurance;
-        },
-        isITAC() {
-            return store.getters.order.policy.isItac;
-        },
-        isNoComp() {
-            return store.getters.order.policy.isNoComp;
-        },
-        isForwardActionDisabled() {
-            return this.displayNoShopsAlert || !this.isMobileAddressValid;
-        },
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            // insurance drops the recycle fee on replace orders so it won't be in supportingItems
-            if (store.getters.payment.isInsurance) {
-                if (
-                    store.getters.payment.parentAccountNumber !==
-                        applicationConfig.CASH_PARENT_ACCOUNT_NUMBER &&
-                    store.getters.order.policy.policyNumber &&
-                    store.getters.order.serviceLocation.zipCode
-                ) {
-                    return true;
-                } else {
-                    // prettier-ignore
-                    {
-                        console.log(new Date() + "Insurance: servce-location invalid prereqs");
-                        console.log(new Date() + "store.getters.payment.parentAccountNumber:" + store.getters.payment.parentAccountNumber);
-                        console.log(new Date() + "store.getters.order.policy.policyNumber:" + store.getters.order.policy.policyNumber);
-                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
-                    }
-
-                    return false;
-                }
-            } else {
-                if (
-                    store.getters.lineItems.supportingItems &&
-                    store.getters.order.serviceLocation.zipCode
-                ) {
-                    return true;
-                } else {
-                    // prettier-ignore
-                    {
-                        console.log(new Date() + "Cash: servce-location invalid prereqs");
-                        console.log(new Date() + "store.getters.lineItems.supportingItems:" + JSON.stringify(store.getters.lineItems.supportingItems));
-                        console.log(new Date() + "store.getters.order.serviceLocation.zipCode:" + store.getters.order.serviceLocation.zipCode);
-                    }
-                    return false;
-                }
-            }
-        },
-        setData(zipCodeData, serviceabilityDetails, mobileFeePart, shopProviderData) {
-            if (zipCodeData) {
-                this.zipContainsMilitaryBase = zipCodeData.containsMilitaryBase;
-                this.zipCodeCtu = zipCodeData.zipCodeCtu;
-            }
-
-            if (serviceabilityDetails) {
-                this.setServiceabilityDetails(serviceabilityDetails);
-            }
-
-            if (mobileFeePart) {
-                this.mobileFeePart = mobileFeePart;
-            }
-
-            if (shopProviderData) {
-                this.shopProviderData = shopProviderData;
-            }
-
-            var gaLabel = this.GaLabels.NO;
-            if (this.isServiceableMobile) {
-                gaLabel = this.GaLabels.YES;
-            }
-
-            this.pushEventToGA(
-                this.GaCategories.APPOINTMENT,
-                this.GaActions.MOBILE_AVAILABLE,
-                gaLabel,
-                true
-            );
-        },
-        setContainsMilitaryBase(val) {
-            if (this.zipContainsMilitaryBase !== val) {
-                this.zipContainsMilitaryBase = val;
-            }
-        },
-        setBillToAccountNumber(val) {
-            this.billToAccountNumber = val;
-        },
-        setCtuForMobile(val) {
-            this.zipCodeCtu = val;
-        },
-        setMobileFeePart(mobileFeePart) {
-            this.mobileFeePart = mobileFeePart;
-        },
-        setRecycleFeePart(recycleFeePart) {
-            this.recycleFeePart = recycleFeePart;
-        },
-        //creating async function as the computed property can not directly handle asynchronous operations or promises.
-        async setMobileLocationQuestions(newValue) {
-            var newZipCode = newValue.addressQuestions.zipCode;
-            if (newZipCode !== this.zipCode) {
-                await getShopProviderData(newZipCode).then((result) => {
-                    if (this.isServiceableMobile) {
-                        this.shopProviderData = result.data;
-                        this.selectedProvider = new Provider(
-                            this.shopProviderData.mobileProviderNumber
-                        );
-                    }
-                });
-            }
-            if (this.isServiceableMobile) {
-                this.setMobileLocation(newValue);
-                this.setMobileLocationInValid(false);
-            } else {
-                await getZipCodeData(newZipCode).then((zipCodeData) => {
-                    this.serviceZipCodeQuestion = {
-                        state: zipCodeData.state,
-                        zipCode: newZipCode,
-                        zipCodeCtu: zipCodeData.zipCodeCtu,
-                    };
-                });
-            }
-        },
-        getCarIdfromStore() {
-            return store.getters.vehicle.carId;
-        },
-        getServiceAddressFromStore() {
-            return store.getters.order.serviceLocation.address;
-        },
-        getServiceAddress2FromStore() {
-            return store.getters.order.serviceLocation.address2;
-        },
-        getServiceCityFromStore() {
-            return store.getters.order.serviceLocation.city;
-        },
-        getServiceStateFromStore() {
-            return store.getters.order.serviceLocation.state;
-        },
-        getServiceZipCodeFromStore() {
-            return store.getters.order.serviceLocation.zipCode;
-        },
-        getIsVehicleHeavyTruckFromStore() {
-            return store.getters.order.vehicle?.isBigTruck ?? false;
-        },
-        getIsVehicleProtectedFromStore() {
-            return store.getters.order.serviceLocation.isVehicleProtected;
-        },
-        getSelectedAppointmentType() {
-            return store.getters.order.serviceLocation.appointmentType;
-        },
-        getSelectedProvider() {
-            return store.getters.order.serviceLocation.provider;
-        },
-        resetMobileLocation() {
-            this.streetAddress = "";
-            this.apartmentNumberOrBusinessName = "";
-            this.city = "";
-
-            this.isVehicleProtected = null;
-        },
-        setServiceabilityDetails(serviceabilityDetails) {
-            this.isGlassServiceableInshop = serviceabilityDetails.isGlassServiceableInshop;
-            this.isRecalibrationServiceableInshop =
-                serviceabilityDetails.isRecalibrationServiceableInshop;
-            this.isGlassServiceableDropoff = serviceabilityDetails.isGlassServiceableDropoff;
-            this.isRecalibrationServiceableDropoff =
-                serviceabilityDetails.isRecalibrationServiceableDropoff;
-            this.isGlassServiceableMobile = serviceabilityDetails.isGlassServiceableMobile;
-            this.isRecalibrationServiceableMobile =
-                serviceabilityDetails.isRecalibrationServiceableMobile;
-        },
-        setMobileLocation(mobileLocation) {
-            this.streetAddress = mobileLocation.addressQuestions.streetAddress;
-            this.apartmentNumberOrBusinessName =
-                mobileLocation.addressQuestions.apartmentNumberOrBusinessName;
-            this.city = mobileLocation.addressQuestions.city;
-            this.state = mobileLocation.addressQuestions.state;
-            this.zipCode = mobileLocation.addressQuestions.zipCode;
-            this.isVehicleProtected = mobileLocation.isVehicleProtected;
-        },
-        async reloadShopData(zipCode) {
-            await this.$refs.shopQuestion.reloadShopData(zipCode);
-        },
-        openRecalibrationInformationModal() {
-            this.recalibrationInformationModal.openModal();
-        },
-        backButtonAction() {
-            const payment = store.getters.order.payment;
-            if (
-                payment?.isInsurance &&
-                (payment?.insuranceCoverage?.isVerified ||
-                    store.getters.order.referralNumber.length === 6)
-            ) {
-                navigateToHeritageFunnel({
-                    shouldSaveSession: false,
-                    pageNameToLog: "service-location",
-                    navType: "back",
-                });
-            } else {
-                this.$router.navigateWithoutSaving(
-                    this.navigationScenarios.CLICKED_BACK,
-                    this.pageName
-                );
-            }
-        },
-        updateAndSaveIsMSRFeeApplicable() {
-            const isMSRFeeApplicable =
-                this.isMobileStaticRecalibrationApplicable &&
-                this.selectedAppointmentType == "Mobile";
-            this.dispatchStoreAction(
-                this.storeActions.SAVE_IS_MSR_FEE_APPLICABLE,
-                isMSRFeeApplicable
-            );
-        },
-        updateAndSaveSupportingItems() {
-            let supportingItems = store.getters.lineItems.supportingItems;
-            let shouldSaveSupportingItems = false;
-
-            supportingItems =
-                !supportingItems && this.isMobileStaticRecalibrationApplicable
-                    ? []
-                    : supportingItems;
-
-            // for insurance orders, fees can get removed causing supportingitems to be null or empty
-            if (!supportingItems) {
-                return;
-            }
-
-            // update recyle fee price
-            if (this.recycleFeePart) {
-                const recycleFeeIndex = supportingItems.findIndex(
-                    (item) => item.partNumber == partNumberStrings.RECYCLE_FEE
-                );
-                if (recycleFeeIndex >= 0) {
-                    supportingItems[recycleFeeIndex].laborAmount = this.recycleFeePart.laborAmount;
-                    supportingItems[recycleFeeIndex].sellingPrice =
-                        this.recycleFeePart.sellingPrice;
-                    supportingItems[recycleFeeIndex].kitPrice = this.recycleFeePart.kitPrice;
-
-                    shouldSaveSupportingItems = true;
-                }
-            }
-
-            // if we have a mobile fee, then save/update supporting items
-            if (this.selectedAppointmentType == "Mobile") {
-                const mobileFeeIndex = supportingItems.findIndex(
-                    (item) => item.partType == MOBILE_FEE_PART_TYPE
-                );
-                // If it already exists, update the price with latest data
-                if (mobileFeeIndex >= 0) {
-                    supportingItems[mobileFeeIndex].laborAmount = this.mobileFeePart.laborAmount;
-                    supportingItems[mobileFeeIndex].sellingPrice = this.mobileFeePart.sellingPrice;
-                    supportingItems[mobileFeeIndex].kitPrice = this.mobileFeePart.kitPrice;
-                } else {
-                    if (this.mobileFeePart !== null) supportingItems.push(this.mobileFeePart);
-                }
-
-                shouldSaveSupportingItems = true;
-            } else {
-                // if it's not a mobile, then make sure we remove any that may have been added
-                const removeMobileFeeIndex = supportingItems?.findIndex(
-                    (item) => item.partType == MOBILE_FEE_PART_TYPE
-                );
-
-                if (removeMobileFeeIndex >= 0) {
-                    supportingItems.splice(removeMobileFeeIndex, 1);
-                    shouldSaveSupportingItems = true;
-                }
-            }
-
-            // Use shouldSaveSupportingItems flag to determine if we need to save supporting items. Prevents unnecessary/multiple saves
-            if (shouldSaveSupportingItems) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_SUPPORTING_ITEMS_SUPPRESSING_STATE_RESETTING,
-                    supportingItems,
-                    false
-                );
-            }
-        },
-        async forwardButtonAction() {
-            this.navigatingForward = true;
-            var ctu = this.zipCodeCtu;
-            if (
-                this.selectedAppointmentType == AppointmentTypeStrings.MOBILE &&
-                this.selectedProvider &&
-                this.selectedProvider.address
-            ) {
-                this.selectedProvider.address.streetAddress = null;
-                this.selectedProvider.address.city = null;
-                this.selectedProvider.address.state = null;
-                this.selectedProvider.address.zipCode = null;
-                this.selectedProvider.address.zipCodeCtu = null;
-            } else {
-                // if we have a provider.zipCodeCtu that's different than the servicelocation.zipCodeCtu then they
-                // may have selected a shop in a different ctu.  change the servicelocation zip/ctu if different
-                if (this.zipCodeCtu != this.selectedProvider.address.zipCodeCtu) {
-                    ctu = this.selectedProvider.address.zipCodeCtu;
-                }
-                this.resetMobileLocation();
-            }
-
-            await this.dispatchStoreAction(
-                this.storeActions.SAVE_SERVICE_LOCATION,
-                {
-                    address: this.streetAddress,
-                    address2: this.apartmentNumberOrBusinessName,
-                    city: this.city,
-                    state: this.state,
-                    zipCode: this.zipCode,
-                    zipCodeCtu: ctu,
-                    appointmentType: this.selectedAppointmentType,
-                    isVehicleProtected: this.isVehicleProtected,
-                    provider: {
-                        providerNumber: this.selectedProvider?.providerNumber,
-                        address: {
-                            streetAddress: this.selectedProvider?.address?.streetAddress,
-                            city: this.selectedProvider?.address?.city,
-                            state: this.selectedProvider?.address?.state,
-                            zipCode: this.selectedProvider?.address?.zipCode,
-                            zipCodeCtu: this.selectedProvider?.address?.zipCodeCtu,
-                        },
-                    },
-                },
-                false
-            );
-
-            if (this.billToAccountNumber) {
-                this.dispatchStoreAction(
-                    this.storeActions.SAVE_BILL_TO_ACCOUNT_NUMBER,
-                    this.billToAccountNumber,
-                    false
-                );
-            }
-
-            this.updateAndSaveSupportingItems();
-            this.updateAndSaveIsMSRFeeApplicable();
-            this.$router.navigateWithSaving(
-                this.navigationScenarios.CLICKED_FORWARD,
-                this.pageName
-            );
-        },
-        setMobileLocationInValid(isMobileLocationInValid) {
-            this.isMobileAddressValid = !isMobileLocationInValid;
-        },
-    },
-    watch: {
-        zipCode: {
-            handler(newValue) {
-                if (!this.navigatingForward) {
-                    getShopProviderData(this.zipCode).then(async (result) => {
-                        this.shopProviderData = result.data;
-                        if (this.selectedAppointmentType === "Mobile") {
-                            this.selectedProvider = new Provider(
-                                this.shopProviderData.mobileProviderNumber
-                            );
-                        } else {
-                            this.selectedProvider = new Provider();
-                        }
-                    });
-                }
-            },
-        },
-        selectedAppointmentType: {
-            handler(newValue) {
-                if (newValue === "Mobile") {
-                    this.selectedProvider = new Provider(
-                        this.shopProviderData.mobileProviderNumber
-                    );
-                    if (this.zipCode == this.getServiceZipCodeFromStore()) {
-                        //restore mobile address from store in case user make changes to address but not commit it.
-                        this.streetAddress = this.getServiceAddressFromStore();
-                        this.apartmentNumberOrBusinessName = this.getServiceAddress2FromStore();
-                        this.city = this.getServiceCityFromStore();
-                        this.isVehicleProtected = this.getIsVehicleProtectedFromStore();
-                        this.$refs.mobileLocationQuestions.resetAlerts();
-                    } else {
-                        this.resetMobileLocation();
-                    }
-                } else {
-                    this.selectedProvider = new Provider();
-                }
-            },
-        },
-    },
-    components: {
-        alert,
-        serviceZipModalQuestion,
-        appointmentTypeQuestion,
-        mobileLocationModalQuestions,
-        funnelHeader,
-        navbar,
-        funnelSubHeader,
-        Form,
-        loadingModal,
-        contentGroupModal,
-        shopQuestion,
-    },
-};
-</script>
-
-<style lang="scss">
-.appointment-type-question {
-    .button-question {
-        .col {
-            @include media-breakpoint-up(md) {
-                padding: 0 0.75rem;
-            }
-            @include media-breakpoint-up(xl) {
-                width: 33.3333333%;
-                flex: 0 0 auto;
-            }
-        }
-    }
-}
-.question-text {
-    & > span {
-        text-align: center;
-        color: $black;
-    }
-}
-</style>
-
-
-
-<!-- OLD SERVICE LOCATION ENDS -->
-
-
-<!-- NEW SERVICE LOCATION BEGINS -->
-
-<!--
-
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
@@ -1814,7 +959,3 @@ export default {
     box-shadow: 0 0 0 1px $primary !important;
 }
 </style>
-
--->
-
-<!-- NEW SERVICE LOCATION ENDS -->