Merge remote-tracking branch 'origin/release/2025.07.10' into feature/Digital/CASH-814

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/constants/progress-bar-mapper.js

@@ -13,8 +13,9 @@ const pagePercentageMapper = {
     "capability-questions": 40,
     quote: 48,
     "insurance-company": 52,
-    "service-location": 60,
-    schedule: 72,
+    // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+    // "service-location": 60,
+    schedule: 64,
     "mobile-details": 76,
     "customer-details": 84,
     "payment-method": 92,

src/digital-components/date-picker/date-picker.vue

@@ -485,7 +485,7 @@ export default {
                 const response = config.getSelectableDatesCallback(
                     initialViewStartDate,
                     initialViewEndDate,
-                    store.getters.order.serviceLocation.provider.providerNumber
+                    config.providerNumber
                 );
                 resolve(response);
             });

src/digital-components/modal/modal.vue

@@ -36,9 +36,13 @@
                         :id="modalId + '-modalbtn'"
                         ref="modalButtonMain"
                         loaderColor="white"
+                        :isDisabled="footerButtonDisabled"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit"
-                        :class="isFooterButtonDisabled && 'form-test-invalid'" />
+                        :class="[
+                            isFooterButtonDisabled && 'form-test-invalid',
+                            { 'form-test-invalid': footerButtonDisabled === true },
+                        ]" />
                 </div>
             </div>
         </div>
@@ -59,6 +63,7 @@ export default {
         footerButtonText: String,
         suppressPageScroll: Boolean,
         staticBackdrop: Boolean,
+        footerButtonDisabled: Boolean,
         onModalOpenedCallback: {
             type: Function,
         },

src/digital-components/sierra-webchat/sierra-webchat.vue

@@ -4,6 +4,10 @@
 
 <script>
 import analyticsMixin from "@/mixins/analytics-mixin";
+import store from "@/store";
+import { routeData } from "@/router/constants/routes";
+import { deepClone } from "@/helpers/object-helper";
+
 export default {
     name: "sierraWebchat",
     mixins: [analyticsMixin],
@@ -24,7 +28,10 @@ export default {
         },
         createSierraConfig() {
             return {
-                variables: { application: "funnel" },
+                variables: {
+                    application: "funnel",
+                    ...this.getSierraContext(),
+                },
                 display: "corner",
                 onLoad: () => this.openSierraChatModal(),
                 onOpen: () => {},
@@ -35,6 +42,39 @@ export default {
                     ),
             };
         },
+        getSierraContext() {
+            const glassDamage = store.getters?.order?.damage?.glassToReplace;
+            const glassType =
+                glassDamage && glassDamage.length > 0
+                    ? glassDamage.length > 1
+                        ? "Multiglass"
+                        : glassDamage[0].glassType // todo: clarify?
+                    : "";
+
+            const damageType = store.getters.order?.damage?.isRepair ? "repair" : "replace";
+
+            const paymentType = store.getters.oreder?.payment?.isInsurance ? "insurance" : "cash";
+
+            const glassParts = store.getters.order?.lineItems?.glassParts;
+            const partId = glassParts && glassParts.length > 0 ? glassParts[0].partId : "";
+
+            const packageData = deepClone(store.getters?.pageData(routeData.QUOTE.name));
+
+            return {
+                current_page: this.pageName,
+                vehicle_year: store.getters.order?.vehicle?.year ?? "",
+                vehicle_make: store.getters.order?.vehicle?.make ?? "",
+                vehicle_model: store.getters.order?.vehicle?.model ?? "",
+                vehicle_style: store.getters.order?.vehicle?.style ?? "",
+                service_zip: store.getters.order?.serviceLocation?.serviceZip ?? "",
+                glass_type: glassType ?? "",
+                damage_type: damageType ?? "",
+                payment_type: paymentType ?? "",
+                quote: packageData ?? [],
+                part_id: partId ?? "",
+                recalibration: store.getters?.isRecalibrationOnOrder ?? "",
+            };
+        },
         launchSierraChat() {
             window.sierraConfig = this.createSierraConfig();
             // Preload CSS if not already present

src/layouts/quote/quote.vue

@@ -561,8 +561,12 @@ export default {
             skipToInsurance: null,
         };
     },
-    mounted() {
+    async mounted() {
         this.attachCustomEventsForAnalytics();
+
+        await this.$nextTick();
+
+        this.$refs?.servicePackage?.savePackageInfoToPageData?.();
     },
     computed: {
         lineItemsCloneForWatcher() {

src/layouts/quote/service-package-question/service-package-question.vue

@@ -44,6 +44,7 @@ import {
 import { containsRecalParts, getItemsWithoutRecalParts } from "@/helpers/recal-helper";
 import experimentMixin from "@/mixins/experiment-mixin.js";
 import { experimentSettings } from "@/constants/experiments";
+import { savePageData } from "@/router/methods/helpers/save-page-data";
 
 export default {
     name: "servicePackageQuestion",
@@ -434,6 +435,15 @@ export default {
                     return null;
             }
         },
+        async savePackageInfoToPageData() {
+            const answers = this.servicePackageAnswers;
+            const toLog = answers.map((ans) => ({
+                packageName: ans.buttonLabel,
+                price: ans.buttonAuxillaryCopy,
+            }));
+
+            await savePageData(this.pageName, toLog);
+        },
     },
     components: {
         buttonQuestion,

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.spec.js

@@ -176,6 +176,9 @@ beforeEach(() => {
                 isRepair: false,
             },
             referralNumber: "1234567",
+            policy: {
+                policyNumber: "123",
+            },
         },
         payment: {
             isInsurance: true,
@@ -185,6 +188,9 @@ beforeEach(() => {
             supportingItems: [],
         },
         experimentSettings: {},
+        vehicle: {
+            carId: "123",
+        },
     };
 });
 afterEach(() => {
@@ -195,11 +201,12 @@ afterEach(() => {
 
 describe("schedule.vue...", () => {
     describe("initial load", () => {
-        test("should pass arePagePrerequisitesValid with a mobile order and no providerNumber", () => {
+        test("should pass arePagePrerequisitesValid with a mobile CASH order and no providerNumber", () => {
             // Arrange
             const { wrapper } = setupMocks({});
             store.getters.order.serviceLocation.appointmentType = "Mobile";
-            store.getters.order.serviceLocation.provider = null;
+            store.getters.order.serviceLocation.provider.policyNumber = null;
+            store.getters.payment.isInsurance = false;
 
             // Act
             const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
@@ -208,7 +215,7 @@ describe("schedule.vue...", () => {
             expect(arePagePrerequisitesValid).toBe(true);
         });
 
-        test("should pass arePagePrerequisitesValid with a inshop order and providerNumber", () => {
+        test("should pass arePagePrerequisitesValid with an inshop order and providerNumber", () => {
             // Arrange
             const { wrapper } = setupMocks({});
 
@@ -328,7 +335,8 @@ describe("schedule.vue...", () => {
         });
 
         describe("beforeRouteEnter function... ", () => {
-            test("should call next() and call all functions within next", async () => {
+            // TODO: restore this test (temporarily removed it until CASH-845 is in QA then looping back)
+            xtest("should call next() and call all functions within next", async () => {
                 // Arrange
                 const { wrapper } = setupMocks({});
                 wrapper.vm.selectableDatesInshop = {
@@ -507,7 +515,8 @@ describe("schedule.vue...", () => {
         });
     });
 
-    test("forwardButtonAction should call route method navigateWithoutSaving", async () => {
+    // TODO: restore this test (temporarily removed it until CASH-845 is in QA then looping back)
+    xtest("forwardButtonAction should call route method navigateWithoutSaving", async () => {
         // Arrange
         const { wrapper } = setupMocks({});
         wrapper.vm.dispatchStoreAction = jest.fn(() => {

src/layouts/service-location/appointment-type-question/appointment-type-question.spec.js

@@ -59,7 +59,7 @@ afterEach(() => {
 });
 
 describe("appointment-type-question.vue", () => {
-    it("Should display all options if in-shop, mobile, and dropoff are available", async () => {
+    it("Should display all options if in-shop and mobile are available", async () => {
         // Arrange/Act
         const { wrapper } = setupMocks({
             mixins: [mockMixin],
@@ -67,7 +67,6 @@ describe("appointment-type-question.vue", () => {
                 cmsWidgetName: cmsWidgetName,
                 isServiceableInshop: true,
                 isServiceableMobile: true,
-                isServiceableDropoff: true,
             },
             mountOptions: {
                 attachTo: document.body,
@@ -90,13 +89,6 @@ describe("appointment-type-question.vue", () => {
                 SubWidgetName: "",
                 Text: "In-shop",
             },
-            {
-                AnswerImageUrl: "",
-                Name: "Dropoff",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "Drop-off",
-            },
         ]);
     });
 
@@ -108,7 +100,6 @@ describe("appointment-type-question.vue", () => {
                 cmsWidgetName: cmsWidgetName,
                 isServiceableInshop: true,
                 isServiceableMobile: false,
-                isServiceableDropoff: false,
             },
             mountOptions: {
                 attachTo: document.body,
@@ -127,74 +118,6 @@ describe("appointment-type-question.vue", () => {
         ]);
     });
 
-    it("Should display only the In-Shop and Drop-Off answers when mobile service is not  available", async () => {
-        // Arrange/Act
-        const { wrapper } = setupMocks({
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: cmsWidgetName,
-                isServiceableInshop: true,
-                isServiceableMobile: false,
-                isServiceableDropoff: true,
-            },
-            mountOptions: {
-                attachTo: document.body,
-            },
-        });
-
-        // Assert
-        expect(wrapper.vm.answersToDisplay).toEqual([
-            {
-                AnswerImageUrl: "",
-                Name: "Inshop",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "In-shop",
-            },
-            {
-                AnswerImageUrl: "",
-                Name: "Dropoff",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "Drop-off",
-            },
-        ]);
-    });
-
-    it("Should display only the In-Shop and Drop-Off answers when mobile service is not  available", async () => {
-        // Arrange/Act
-        const { wrapper } = setupMocks({
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: cmsWidgetName,
-                isServiceableInshop: true,
-                isServiceableMobile: false,
-                isServiceableDropoff: true,
-            },
-            mountOptions: {
-                attachTo: document.body,
-            },
-        });
-
-        // Assert
-        expect(wrapper.vm.answersToDisplay).toEqual([
-            {
-                AnswerImageUrl: "",
-                Name: "Inshop",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "In-shop",
-            },
-            {
-                AnswerImageUrl: "",
-                Name: "Dropoff",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "Drop-off",
-            },
-        ]);
-    });
-
     it("Should display only the Mobile answer when only mobile service is available", async () => {
         // Arrange/Act
         const { wrapper } = setupMocks({
@@ -203,7 +126,6 @@ describe("appointment-type-question.vue", () => {
                 cmsWidgetName: cmsWidgetName,
                 isServiceableInshop: false,
                 isServiceableMobile: true,
-                isServiceableDropoff: false,
             },
             mountOptions: {
                 attachTo: document.body,
@@ -221,46 +143,6 @@ describe("appointment-type-question.vue", () => {
             },
         ]);
     });
-    it("Should not display Drop off answer when it is repair order", async () => {
-        // Arrange/Act
-
-        store.getters = {
-            damage: {
-                isRepair: true,
-            },
-        };
-
-        const { wrapper } = setupMocks({
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: cmsWidgetName,
-                isServiceableInshop: true,
-                isServiceableMobile: true,
-                isServiceableDropoff: true,
-            },
-            mountOptions: {
-                attachTo: document.body,
-            },
-        });
-
-        // Assert
-        expect(wrapper.vm.answersToDisplay).toEqual([
-            {
-                AnswerImageUrl: "",
-                Name: "Mobile",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "Mobile",
-            },
-            {
-                AnswerImageUrl: "",
-                Name: "Inshop",
-                SubText: "",
-                SubWidgetName: "",
-                Text: "In-shop",
-            },
-        ]);
-    });
 
     it("Should display no answers if neither in-shop nor mobile service are available", async () => {
         // Arrange/Act
@@ -270,7 +152,6 @@ describe("appointment-type-question.vue", () => {
                 cmsWidgetName: cmsWidgetName,
                 isServiceableInshop: false,
                 isServiceableMobile: false,
-                isServiceableDropoff: false,
             },
             mountOptions: {
                 attachTo: document.body,

src/layouts/service-location/appointment-type-question/appointment-type-question.vue

@@ -33,7 +33,6 @@ export default {
         cmsWidgetName: String,
         isServiceableMobile: Boolean,
         isServiceableInshop: Boolean,
-        isServiceableDropoff: Boolean,
         mobileFeeApplies: Boolean,
         labelBold: {
             type: Boolean,
@@ -52,16 +51,13 @@ export default {
         answersToDisplay() {
             const shouldShowMobile = this.isServiceableMobile;
             const shouldShowInshop = this.isServiceableInshop;
-            const shouldShowDropoff =
-                this.isServiceableDropoff && !this.$store.getters.damage.isRepair;
             const zipCode = this.zipCode;
 
             var answers = this.answersFromCms
                 ? this.answersFromCms.filter((answer) => {
                       return (
                           (answer.Name == AppointmentTypeStrings.IN_SHOP && shouldShowInshop) ||
-                          (answer.Name == AppointmentTypeStrings.MOBILE && shouldShowMobile) ||
-                          (answer.Name == AppointmentTypeStrings.DROP_OFF && shouldShowDropoff)
+                          (answer.Name == AppointmentTypeStrings.MOBILE && shouldShowMobile)
                       );
                   })
                 : [];
@@ -87,9 +83,7 @@ export default {
             return this.isServiceableMobile && !this.isServiceableInshop;
         },
         isInshopOnly() {
-            return (
-                this.isServiceableInshop && !this.isServiceableMobile && !this.isServiceableDropoff
-            );
+            return this.isServiceableInshop && !this.isServiceableMobile;
         },
     },
     watch: {

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

@@ -0,0 +1,848 @@
+<!-- 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

@@ -115,9 +115,9 @@
                         :selectedAppointmentType="selectedAppointmentType"
                         :modelValue="{
                             zipCode: zipCode,
-                            providerNumber: selectedProvider?.providerNumber,
+                            state: state,
                         }"
-                        :preselectedProviderNumber="selectedProvider?.providerNumber"
+                        :preSelectedProviderNumber="selectedProvider?.providerNumber"
                         :shopProviderData="shopProviderData"
                         :isServiceableInshop="isServiceableInshop"
                         @updated-serviceability="setServiceabilityDetails"
@@ -844,25 +844,10 @@ export default {
             let provider = this.shopProviderData?.shopProviders?.find(
                 (p) => p.providerNumber === providerObject?.providerNumber
             );
-            if (!provider && this.shopProviderData?.shopProviders?.length > 0) {
-                provider = this.shopProviderData.shopProviders[0];
-            }
             this.selectedProvider = provider;
-            if (provider && provider.address) {
-                this.zipCode = provider.address.zipCode;
-                this.state = provider.address.state;
-            }
-            if (
-                !this.selectedProvider ||
-                !this.shopProviderData?.shopProviders?.some(
-                    (p) => p.providerNumber === this.selectedProvider?.providerNumber
-                )
-            ) {
-                this.selectedProvider = this.shopProviderData?.shopProviders?.[0];
-            }
             if (providerObject && providerObject.address) {
-                this.zipCode = providerObject.address.zipCode;
-                this.state = providerObject.address.state;
+                this.zipCode = providerObject.searchedZip;
+                this.state = providerObject.searchedState;
             }
         },
         setZipcodeCtu(zipcodeCtu) {

src/layouts/service-location/shop-question/shop-question-popup.vue

@@ -1,18 +1,10 @@
 <template>
     <transition name="fade" mode="out-in">
         <div v-if="isDisplayed" class="shop-question" aria-live="polite">
-            <alert
-                ref="alertDropoffInformation"
-                v-if="displayDropoffInformation"
-                class="mb-4 drop-off-alert"
-                cmsWidgetName="AlertDropoffInformationWidget"
-                alertClass="alert-info"
-                v-bind:isDismissible="false" />
             <div class="modal-link">
                 <text-link
                     linkType="text"
                     :text="shopQuestionLinkText"
-                    :shopProviderData="shopProviderData"
                     href="#!"
                     @click-event="openModal"></text-link>
             </div>
@@ -24,86 +16,60 @@
         :onModalOpenedCallback="onModalOpened"
         :onModalClosedCallback="onModalClosed"
         :footerButtonText="modalFooterText"
-        @footer-button-event="SetZipCodeAndShop">
-        <div class="zip-search-group">
-            <div class="zip-search-input">
-                <serviceZipQuestion
-                    ref="serviceZipQuestion"
-                    class="shop-question-zipcode"
-                    customInputId="serviceZipCode"
-                    v-model="internalModel.zipCode"
-                    v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
-                    cmsWidgetName="ServiceZipQuestionWidget"
-                    @search-icon-click="onSearchZip"
-                    @keydown.enter="onSearchZip"
-                    includeSearchIcon
-                    :isRequired="false" />
-            </div>
-        </div>
+        :footerButtonDisabled="
+            displayInvalidZipAlert || displayNoShopsAlert || !selectedProviderNumber
+        "
+        @footer-button-event="setZipCodeAndShop">
+        <serviceZipQuestion
+            ref="serviceZipQuestion"
+            class="shop-question-zipcode"
+            customInputId="serviceZipCode"
+            v-model="internalModel.zipCode"
+            v-on="{ 'textboxQuestionEvent.inputIdAssigned': onInputIdAssigned }"
+            cmsWidgetName="ServiceZipQuestionWidget"
+            @search-icon-click="onSearchZip"
+            @keydown.enter="onSearchZip"
+            includeSearchIcon
+            :isRequired="false"
+            :validationRules="''" />
         <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" />
-
+            ref="alertInvalidZip"
+            v-if="displayInvalidZipAlert"
+            class="mb-4"
+            cmsWidgetName="AlertInvalidZipWidget"
+            alertClass="alert-danger"
+            v-bind:isDismissible="false" />
         <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" />
-        <buttonQuestion
-            ref="buttonQuestion"
-            buttonTypeString="shopListButton"
-            :buttonTypeObject="shopListButton"
-            class="radioQuestion"
-            :questionText="questionText"
-            :answers="answers"
-            groupName="chooseShop"
-            textPosition="text-start"
-            v-model="selectedProviderNumber"
-            isRequired
-            validationRules="option-required" />
-        <div class="show-more-shops-link">
-            <textLink
-                v-if="displaySeeMoreLocationsLink"
-                ref="showMoreShopsLink"
-                id="showMoreShopsId2"
-                cmsWidgetName="ShowMoreShopsLinkWidget"
-                linkType="text"
-                :text="showMoreShopsLinkText"
-                href="#!"
-                @click-event="getNextShopsFromList(3)"
-                :aria-label="showMoreShopsLinkText" />
+        <div v-if="!displayInvalidZipAlert">
+            <buttonQuestion
+                ref="buttonQuestion"
+                buttonTypeString="shopListButton"
+                :buttonTypeObject="shopListButton"
+                class="radioQuestion"
+                :questionText="questionText"
+                :answers="answers"
+                groupName="chooseShop"
+                textPosition="text-start"
+                v-model="selectedProviderNumber"
+                isRequired
+                :validationRules="this.selectedProviderNumber ? '' : 'option-required'" />
+            <div class="show-more-shops-link">
+                <textLink
+                    v-if="displaySeeMoreLocationsLink"
+                    ref="showMoreShopsLink"
+                    id="showMoreShopsId2"
+                    cmsWidgetName="ShowMoreShopsLinkWidget"
+                    linkType="text"
+                    :text="showMoreShopsLinkText"
+                    href="#!"
+                    @click-event="getNextShopsFromList(3)"
+                    :aria-label="showMoreShopsLinkText" />
+            </div>
         </div>
     </modal>
 </template>
@@ -124,6 +90,7 @@ import { required } from "@/helpers/validation-rules";
 import { errorMessages } from "@/constants/error-messages";
 import baseMixin from "@/mixins/base-mixin.js";
 import { nextTick } from "vue";
+import { regex } from "@/helpers/validation-rules";
 
 import { getAvailabilityRating } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
@@ -141,13 +108,7 @@ import {
 } from "@/layouts/service-location/helpers/service-location-helper/service-location-helper";
 
 defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
-
-function getShopsByZip(zipCode, shops, numberToGet = 3) {
-    return shops
-        .filter((shop) => shop.address && shop.address.zipCode && shop.address.zipCode !== "")
-        .sort((a, b) => a.distanceInMiles - b.distanceInMiles)
-        .slice(0, numberToGet);
-}
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
 
 export default {
     name: "shop-question-popup",
@@ -167,6 +128,9 @@ export default {
             lastSearchedZip: "",
             lastSuccessfulZip: "",
             hasLoadedShopData: false,
+            displayInvalidZipAlert: false,
+            areShopsAvialable: true,
+            displayNoShopsAlert: false,
         };
     },
     props: {
@@ -193,7 +157,7 @@ export default {
             default: "",
         },
         preSelectedProviderNumber: {
-            type: [String, Number],
+            type: String,
             default: null,
         },
     },
@@ -243,9 +207,6 @@ export default {
         showMoreShopsLinkText() {
             return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
         },
-        displayNoShopsAlert() {
-            return this.hasLoadedShopData && this.answers.length === 0;
-        },
     },
     methods: {
         openModal(event) {
@@ -369,20 +330,22 @@ export default {
             this.shopIndex = 0;
         },
         onModalOpened() {
-            this.shopIndex = 3;
+            const preSelectedIndex = this.shopProviders.findIndex(
+                (provider) => provider.providerNumber == this.preSelectedProviderNumber
+            );
+
+            if (preSelectedIndex > -1) {
+                this.shopIndex = Math.ceil((preSelectedIndex + 1) / 3) * 3;
+            } else {
+                this.shopIndex = 3;
+            }
             this.internalModel = this.copyModel(this.modelValue);
             this.internalModel.zipCode = this.zipCode;
             this.localShopProviderData = this.shopProviderData;
             this.answers = [];
-            this.updateShopsForZip(this.internalModel.zipCode);
+            this.onSearchZip();
             this.focusOnZipInput();
             this.selectedProviderNumber = this.preSelectedProviderNumber;
-            if (this.internalModel.zipCode && this.shopProviders.length > 0) {
-                this.updateShopsForZip(this.internalModel.zipCode);
-            } else {
-                this.internalModel.zipCode = this.zipCode;
-                this.updateShopsForZip(this.internalModel.zipCode);
-            }
             if (
                 (!this.selectedProviderNumber ||
                     !this.shopProviders.some(
@@ -398,14 +361,7 @@ export default {
         },
         onModalClosed() {
             this.internalModel = this.copyModel(this.modelValue);
-            this.selectedProviderNumber = this.preSelectedProviderNumber;
             this.resetsOnZipInput();
-            let selectedProvider = this.shopProviders.find(
-                (provider) => provider.providerNumber == this.selectedProviderNumber
-            );
-            if (!selectedProvider && this.shopProviders.length > 0) {
-                selectedProvider = this.shopProviders[0];
-            }
         },
         resetsOnZipInput() {
             this.resetAlerts();
@@ -415,33 +371,49 @@ export default {
                 event.preventDefault();
                 event.stopPropagation();
             }
+            this.resetsOnZipInput();
+            this.displayNoShopsAlert = false;
             const zip = this.internalModel.zipCode;
-            if (this.isVehicleHeavyTruck) {
-                // check the location endpoint to verify this zip can service a heavy truck
-                const closestShops = await getClosestApplicableShops(
-                    this.internalModel.zipCode,
-                    this.carId,
-                    "service-location"
-                );
-
-                if (!closestShops || closestShops.providers?.length === 0) {
-                    this.displayNoServiceAlert = true;
-                    this.focusOnZipInput();
-                    this.resetModalButtonStyle();
-                    return null;
-                }
+            const zipCodeData = await this.getZipCodeData(
+                this.internalModel.zipCode,
+                "service-location"
+            );
+            if (!zipCodeData.isValid) {
+                this.displayInvalidZipAlert = true;
+                //this.selectedProviderNumber = null;
+                this.focusOnZipInput();
+                this.resetModalButtonStyle();
             } else {
-                getShopProviderData(zip).then(async (result) => {
-                    this.localShopProviderData = result.data;
-                    this.updateShopsForZip(this.internalModel.zipCode);
-                    if (this.selectedAppointmentType === "Mobile") {
-                        this.selectedProvider = new Provider(
-                            this.shopProviderData.mobileProviderNumber
-                        );
-                    } else {
-                        this.selectedProvider = new Provider();
+                if (this.isVehicleHeavyTruck) {
+                    // check the location endpoint to verify this zip can service a heavy truck
+                    const closestShops = await getClosestApplicableShops(
+                        this.internalModel.zipCode,
+                        this.carId,
+                        "service-location"
+                    );
+
+                    if (!closestShops || closestShops.providers?.length === 0) {
+                        this.displayNoServiceAlert = true;
+                        this.focusOnZipInput();
+                        this.resetModalButtonStyle();
+                        return null;
                     }
-                });
+                } else {
+                    getShopProviderData(zip).then(async (result) => {
+                        if (this.displayNoShopsAlert === true) {
+                            this.displayNoShopsAlert = false;
+                        }
+                        this.localShopProviderData = result.data;
+                        this.updateShopsForZip(this.internalModel.zipCode);
+                        if (this.selectedAppointmentType === "Mobile") {
+                            this.selectedProvider = new Provider(
+                                this.shopProviderData.mobileProviderNumber
+                            );
+                        } else {
+                            this.selectedProvider = new Provider();
+                        }
+                    });
+                }
             }
         },
         async updateShopsForZip(zipCode) {
@@ -458,11 +430,23 @@ export default {
             }
             this.isLoadingShops = true;
             if (!zipCode || !this.shopProviders.length) {
-                this.handleUpdate();
+                this.answers = [];
+                this.displayNoShopsAlert = true;
+                this.displaySeeMoreLocationsLink = false;
+                this.isLoadingShops = false;
                 return;
             }
 
-            const sortedShops = getShopsByZip(zipCode, this.shopProviders, 3);
+            const selectedIndex = this.shopProviders.findIndex(
+                (provider) => provider.providerNumber == this.selectedProviderNumber
+            );
+
+            // If not found, only show the first 3 shops
+            if (selectedIndex === -1) {
+                this.shopIndex = 3;
+            }
+
+            const sortedShops = this.getShopsByZip(zipCode, this.shopProviders, this.shopIndex);
 
             const toTitleCase = (str) => {
                 return str.replace(/\w\S*/g, function (txt) {
@@ -498,12 +482,22 @@ export default {
                 };
             });
             this.answers = mappedData;
+            if (
+                this.selectedProviderNumber &&
+                !this.answers.some((a) => String(a.value) === String(this.selectedProviderNumber))
+            ) {
+                this.selectedProviderNumber = null;
+            }
             this.shopIndex = mappedData.length;
             this.displaySeeMoreLocationsLink = this.shopIndex < this.shopProviders.length;
             if (mappedData.length > 0) {
                 this.lastSuccessfulZip = zipCode;
             }
             this.isLoadingShops = false;
+            this.displayNoShopsAlert = this.answers.length === 0;
+        },
+        resetModalButtonStyle() {
+            this.modal.resetButtonStyle();
         },
         onInputIdAssigned(inputId) {
             this.serviceZipCodeTextInputId = inputId;
@@ -515,17 +509,24 @@ export default {
         resetAlerts() {
             this.displayInvalidZipAlert = false;
             this.displayNoServiceAlert = false;
+            this.displayNoShopsAlert = false;
         },
-        async SetZipCodeAndShop() {
+        async setZipCodeAndShop() {
+            if (
+                this.displayInvalidZipAlert ||
+                this.displayNoShopsAlert ||
+                !this.selectedProviderNumber
+            ) {
+                return;
+            }
+            const zipToEmit = this.lastSearchedZip;
+
             const selectedProvider = this.shopProviders.find(
                 (provider) => provider.providerNumber == this.selectedProviderNumber
             );
             this.resetAlerts();
 
-            const zipCodeData = await this.getZipCodeData(
-                selectedProvider.address.zipCode,
-                "service-location"
-            );
+            const zipCodeData = await this.getZipCodeData(zipToEmit, "service-location");
 
             if (!zipCodeData.isValid) {
                 this.displayInvalidZipAlert = true;
@@ -548,7 +549,6 @@ export default {
                     }
                 }
 
-                selectedProvider.address.state = zipCodeData.state;
                 selectedProvider.address.zipCodeCtu = zipCodeData.zipCodeCtu;
 
                 // retrieve mobile fee part
@@ -585,11 +585,25 @@ export default {
 
                 this.$emit("update:modelValue", this.selectedValue);
                 this.$emit("update-shop-provider-data", this.localShopProviderData);
-                this.$emit("shop-selected", selectedProvider);
+                this.internalModel.state = zipCodeData.state;
+                this.$emit("shop-selected", {
+                    providerNumber: selectedProvider?.providerNumber,
+                    address: selectedProvider?.address,
+                    searchedZip: zipToEmit,
+                    searchedState: this.internalModel.state,
+                });
 
                 this.closeModal();
             }
         },
+        getShopsByZip(zipCode, shops, numberToGet = 3) {
+            return shops
+                .filter(
+                    (shop) => shop.address && shop.address.zipCode && shop.address.zipCode !== ""
+                )
+                .sort((a, b) => a.distanceInMiles - b.distanceInMiles)
+                .slice(0, numberToGet);
+        },
     },
     watch: {
         shopProviderData: {
@@ -597,14 +611,8 @@ export default {
             handler(newVal) {
                 this.localShopProviderData = newVal;
                 this.hasLoadedShopData = true;
-                if (this.internalModel && this.internalModel.zipCode) {
-                    this.updateShopsForZip(this.internalModel.zipCode);
-                }
             },
         },
-        preSelectedProviderNumber(newVal) {
-            this.selectedProviderNumber = newVal;
-        },
     },
     components: {
         modal,
@@ -613,9 +621,6 @@ export default {
         buttonQuestion,
         alert,
     },
-    mounted() {
-        this.handleUpdate();
-    },
 };
 </script>
 
@@ -658,7 +663,7 @@ export default {
 .modal.modal-component .modal-dialog .modal-content .modal-body .textbox-question {
     padding: 0;
 }
-.zip-search-group {
+.shop-question-zipcode {
     display: flex;
     flex-direction: row;
     align-items: stretch;
@@ -673,44 +678,40 @@ export default {
         height: auto;
         padding-left: 0;
     }
-    .zip-search-input {
+    .input-wrapper.has-search-icon {
+        display: flex;
         align-items: stretch;
         flex: 1 1 0;
         height: 100%;
         margin-bottom: 0;
-        input {
+        input,
+        .form-control {
             width: 100%;
-            height: 100%;
+            height: 48px;
+            min-height: 48px;
+            max-height: 48px;
             border: none;
-            padding-top: 0;
-            padding-bottom: 0;
+            padding: 0 1.5rem 0 1.5rem;
             outline: none;
             font-size: 1rem;
             background: transparent;
             box-sizing: border-box;
-            border-radius: 48px 0 0 48px;
-            padding-left: 0;
+            border-radius: 2.5rem 0 0 2.5rem;
         }
     }
-    .btn {
+    .search-icon-button {
         display: flex;
         align-items: center;
-        background-color: #e5f1fa;
         justify-content: center;
-        width: 48px;
+        background-color: #e5f1fa !important;
+        width: 2.5rem;
         height: 48px;
-
         border: none;
-
-        border-radius: 0 48px 48px 0;
+        max-height: 48px;
+        border-radius: 0 2.5rem 2.5rem 0;
         cursor: pointer;
     }
 }
-@media (max-width: 767.98px) {
-    .zip-search-group {
-        padding-left: 0;
-    }
-}
 .show-more-shops-link a {
     text-align: center;
     display: block;
@@ -732,4 +733,18 @@ export default {
     border-radius: 2.5rem;
     padding-left: 1.5rem;
 }
+
+.shop-question-zipcode .form-test-error {
+    display: block;
+    width: 100%;
+    margin-top: 0.25rem;
+    margin-left: 0;
+    color: #d32f2f; // or your error color
+    position: static !important;
+    font-size: 0.875rem;
+    clear: both;
+    float: none;
+    display: block;
+    width: 100%;
+}
 </style>

src/router/constants/routes.js

@@ -56,6 +56,7 @@ export const routeData = {
         path: "/insurance-company",
     },
     SERVICE_LOCATION: {
+        // keep even though this page has been removed from the regular flow bc Heritage still points to it
         name: "service-location",
         path: "/service-location",
     },

src/router/constants/routing-table.js

@@ -421,7 +421,7 @@ const routingTable = function () {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_CASH,
-                    destinationPageData: routeData.SERVICE_LOCATION,
+                    destinationPageData: routeData.SCHEDULE,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_INSURANCE,
@@ -449,8 +449,26 @@ const routingTable = function () {
                 },
             ],
         },
+        // TODO: REMOVE THIS COMMENT AND BELOW, ONCE CASH-803 (SERVICE-LOCATION AND SCHEDULE PAGE COMBINATION) HAS BEEN VETTED
+        // {
+        //     pageName: routeData.SERVICE_LOCATION.name,
+        //     maps: [
+        //         {
+        //             scenario: navigationScenarios.CLICKED_BACK,
+        //             destinationPageData: routeData.QUOTE,
+        //         },
+        //         {
+        //             scenario: navigationScenarios.CLICKED_FORWARD,
+        //             destinationPageData: routeData.SCHEDULE,
+        //         },
+        //         {
+        //             scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
+        //             destinationPageData: routeData.MOBILE_DETAILS,
+        //         },
+        //     ],
+        // },
         {
-            pageName: routeData.SERVICE_LOCATION.name,
+            pageName: routeData.SCHEDULE.name,
             maps: [
                 {
                     scenario: navigationScenarios.CLICKED_BACK,
@@ -458,37 +476,24 @@ const routingTable = function () {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,
-                    destinationPageData: routeData.SCHEDULE,
+                    destinationPageData: routeData.CUSTOMER_DETAILS,
                 },
+                // {
+                //     scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
+                //     destinationPageData: routeData.SERVICE_LOCATION,
+                // },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITH_MOBILE_SERVICE,
                     destinationPageData: routeData.MOBILE_DETAILS,
                 },
             ],
         },
-        {
-            pageName: routeData.SCHEDULE.name,
-            maps: [
-                {
-                    scenario: navigationScenarios.CLICKED_BACK,
-                    destinationPageData: routeData.SERVICE_LOCATION,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_FORWARD,
-                    destinationPageData: routeData.CUSTOMER_DETAILS,
-                },
-                {
-                    scenario: navigationScenarios.CLICKED_CHANGE_LOCATION,
-                    destinationPageData: routeData.SERVICE_LOCATION,
-                },
-            ],
-        },
         {
             pageName: routeData.MOBILE_DETAILS.name,
             maps: [
                 {
                     scenario: navigationScenarios.CLICKED_BACK,
-                    destinationPageData: routeData.SERVICE_LOCATION,
+                    destinationPageData: routeData.SCHEDULE,
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD,

src/router/methods/route-logic/service-location.js

@@ -0,0 +1,8 @@
+import { routeData } from "@/router/constants/routes";
+
+export async function serviceLocationBeforeEnter(to, from) {
+    return {
+        name: routeData.SCHEDULE.name,
+        replace: true,
+    };
+}

src/router/methods/routes.js

@@ -12,6 +12,7 @@ import { errorBeforeEnter } from "@/router/methods/route-logic/error";
 import { restartBeforeEnter } from "@/router/methods/route-logic/restart";
 import { paymentMethodBeforeEnter } from "@/router/methods/route-logic/payment-method";
 import { paymentBeforeEnter } from "@/router/methods/route-logic/payment";
+import { serviceLocationBeforeEnter } from "@/router/methods/route-logic/service-location";
 
 export const routes = [
     // Non-virtual pages.
@@ -29,7 +30,7 @@ export const routes = [
     createRoute(routeData.CAPABILITY_QUESTIONS),
     createRoute(routeData.QUOTE, quoteBeforeEnter),
     createRoute(routeData.INSURANCE_COMPANY, insuranceCompanyBeforeEnter),
-    createRoute(routeData.SERVICE_LOCATION),
+    createRoute(routeData.SERVICE_LOCATION, serviceLocationBeforeEnter),
     createRoute(routeData.SCHEDULE),
     createRoute(routeData.CUSTOMER_DETAILS),
     createRoute(routeData.PAYMENT_METHOD, paymentMethodBeforeEnter),

src/styles/ux-variables.scss

@@ -123,8 +123,8 @@ $body-color: $gray-600;
 
 //Fonts
 $font-family-sans-serif: UrbanistRegular, Arial, Helvetica, sans-serif;
-$font-family-monospace:
-    UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+$font-family-monospace: UrbanistRegular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New",
+    monospace;
 // stylelint-enable value-keyword-case
 $font-family-base: $font-family-sans-serif;
 $font-family-code: $font-family-monospace;