Merged from develop

jest.config.js

@@ -26,7 +26,7 @@ module.exports = {
   testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   coverageThreshold: {
     global: {
-      statements: 80,
+      statements: 78,
       // Got the go ahead from Mark to temporarily lower this. Taking out initialize component made the year,make,model and style coverage drop a bit. Once unit tests for license plate lookup, vin lookup and address lookup are in the coverage should go back up to 90
     },
   },

src/constants/endpoints.js

@@ -108,12 +108,14 @@ const endpoints = {
     },
     GetShopTimeSlots: {
         url: "/schedule/api/v1/schedule/shop-time-slots",
-        mockUrl: "https://mockey.qa.sagaws.net/service/shop-time-slots", // TODO: REMOVE MOCKURL
+        method: "POST",
+    },
+    GetMobileTimeSlots: {
+        url: "/schedule/api/v1/schedule/mobile-time-slots",
         method: "POST",
     },
     GetMobileEarlyBirdFee: {
         url: "/parts/api/v1/parts/mobile-early-bird-fee",
-        mockUrl: "https://mockey.qa.sagaws.net/service/mobile-early-bird-fee", // TODO: REMOVE MOCKURL
         method: "GET",
     },
     SaveSession: {

src/constants/store-actions.js

@@ -33,6 +33,7 @@ const storeActions = {
     GET_MOBILE_FEE_PART: "getMobileFeePart",
     GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
     GET_SHOP_TIME_SLOTS: "getShopTimeSlots",
+    GET_MOBILE_TIME_SLOTS: "getMobileTimeSlots",
     GET_PROVIDERS: "getProviders",
     GET_MOBILE_EARLY_BIRD_FEE: "getMobileEarlyBirdFee",
     SAVE_SESSION: "saveSession",

src/digital-components/button-question/button-question.vue

@@ -257,7 +257,7 @@ export default {
     watch: {
         modelValue(newValue, oldValue) {
             this.resetField({
-                value: newValue
+                value: newValue,
             });
         },
         answers() {

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

@@ -22,7 +22,6 @@
                 <div class="separator-line"></div>
                 <div class="nav-back ps-3"><button></button></div>
                 <div class="nav-forward pe-3"><button></button></div>
-                <!-- TODO Accessibility: Do the days of the week need to be read? -->
                 <div class="grid-item caption"><span class="sr-only">Sunday</span>S</div>
                 <div class="grid-item caption"><span class="sr-only">Monday</span>M</div>
                 <div class="grid-item caption"><span class="sr-only">Tuesday</span>T</div>
@@ -84,7 +83,6 @@ export default {
             months: null,
             disableViewMoreDatesButton: false,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
-            today: null,
             hideSomeDaysForInitialView: null,
         };
     },
@@ -112,6 +110,12 @@ export default {
         },
     },
     computed: {
+        today() {
+            if (this.todayOverrideDateString) {
+                return new Date(this.todayOverrideDateString);
+            }
+            return new Date();
+        },
         todayMonthIndex() {
             return this.today.getMonth() + 1;
         },
@@ -151,39 +155,31 @@ export default {
             this.$emit("date-clicked");
         },
         getWeekStartDate(date) {
-            // Get the day of the week for date
+            const dayOfWeek = date.getDay();
-            let dayOfWeek = date.getDay();
-
             // Subtract the day of the week from date to get the date of Sunday
-            let sunday = new Date(date);
+            const sunday = new Date(date);
             sunday.setDate(sunday.getDate() - dayOfWeek);
-
-            // Return the date of Sunday
             return sunday;
         },
         getWeekEndDate(date) {
-            const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.)
+            const dayOfWeek = date.getDay();
-            const daysUntilSaturday = 6 - currentDay; // Calculate the number of days until Saturday
+            const daysUntilSaturday = 6 - dayOfWeek; // Calculate the number of days until Saturday
-
             // Clone the given date and add the remaining days until Saturday
             const saturday = new Date(date);
             saturday.setDate(date.getDate() + daysUntilSaturday);
-
             return saturday;
         },
         getNextWeekSunday(date) {
-            const currentDay = date.getDay(); // Get the day of the week (0 = Sunday, 1 = Monday, etc.)
+            const dayOfWeek = date.getDay();
-            const daysUntilNextSunday = currentDay === 0 ? 7 : 7 - currentDay; // Calculate the number of days until the next Sunday
+            const daysUntilNextSunday = 7 - dayOfWeek; // Calculate the number of days until the next Sunday
-
             // Clone the given date and add the remaining days until Sunday
             const nextSunday = new Date(date);
             nextSunday.setDate(date.getDate() + daysUntilNextSunday);
-
             return nextSunday;
         },
         getInitialViewWeeks(today, initialViewRowsToShow) {
-            // TODO: this only is for future direction; create logic for past direction
+            // TODO: this only is for future direction; need to create logic for past direction
-            let weeks = [];
+            const weeks = [];
             let weekStartDate = this.getWeekStartDate(today);
             let weekEndDate = this.getWeekEndDate(today);
             for (let i = 0; i < initialViewRowsToShow; i++) {
@@ -200,14 +196,19 @@ export default {
             return weeks;
         },
         async loadInitialData(config) {
-            // CALLED FROM CONSUMING COMPONENT BEFORE DATE-PICKER APPEARS
+            let todayDate;
-            const todayDate = config.todayOverrideDateString
+            if (this.today) {
-                ? new Date(config.todayOverrideDateString)
+                todayDate = this.today;
-                : new Date();
+            } else if (config.todayOverrideDateString) {
+                todayDate = new Date(config.todayOverrideDateString);
+            } else {
+                todayDate = new Date();
+            }
 
-            let todayMonthIndex = todayDate.getMonth() + 1;
+            const todayMonthIndex = todayDate.getMonth() + 1;
-            let todayYearNum = todayDate.getFullYear();
+            const todayYearNum = todayDate.getFullYear();
-            let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
+            // TODO - set up currentMonthStart if direction is PAST:
+            // let currentMonthStart = new Date(todayYearNum, todayMonthIndex - 1, 1);
             let currentMonthEnd = new Date(todayYearNum, todayMonthIndex, 0);
 
             let calendarViewDirection = "none";
@@ -219,10 +220,10 @@ export default {
                 config.initialViewRowsToShow
             );
 
-            let initialViewStartDate = todayDate;
+            const initialViewStartDate = todayDate;
-            let initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
+            const initialViewEndDate = initialViewWeeks[initialViewWeeks.length - 1].weekEndDate;
-            let saturday1month = initialViewWeeks[0].weekEndDate.getMonth();
+            const saturday1month = initialViewWeeks[0].weekEndDate.getMonth();
-            let sunday5month =
+            const sunday5month =
                 initialViewWeeks[initialViewWeeks.length - 1].weekStartDate.getMonth();
 
             let hideSomeDaysForInitialView = false;
@@ -244,9 +245,10 @@ export default {
 
             let myPromise = new Promise((resolve, reject) => {
                 const response = config.customSelectableDatesCallback(
-                    initialViewStartDate,
+                    initialViewStartDate.toISOString().split("T")[0],
-                    initialViewEndDate,
+                    initialViewEndDate.toISOString().split("T")[0],
-                    store.getters.order.serviceLocation.appointmentType
+                    store.getters.order.serviceLocation.appointmentType,
+                    store.getters.order.serviceLocation.provider.providerNumber
                 );
                 resolve(response);
             });
@@ -284,9 +286,9 @@ export default {
                         // Growing from 0 to 1
                         time = Math.min(1, (timestamp - start) / duration);
 
-                    let percentageNew = timingFunc(time);
+                    const percentageNew = timingFunc(time);
-                    let distanceToGo = targetY;
+                    const distanceToGo = targetY;
-                    let thisDistance = percentageNew * distanceToGo;
+                    const thisDistance = percentageNew * distanceToGo;
 
                     wrapper.scrollTo(0, initY + thisDistance);
 
@@ -305,13 +307,11 @@ export default {
         },
 
         async setCalendarData(config = {}) {
-            this.today = config.todayDate;
             this.hideSomeDaysForInitialView = config.hideSomeDaysForInitialView;
-            let hideSecondMonth = config.hideSecondMonth;
+            const hideSecondMonth = config.hideSecondMonth;
             const direction = config.calendarViewDirection;
-
+            const monthsAfterToLoadOffset = 12;
-            const monthsAfterToLoadOffset = 12; // TO BE MADE "CONSTANTS"
+            const monthsBeforeToLoadOffset = 36;
-            const monthsBeforeToLoadOffset = 36; // TO BE MADE "CONSTANTS"
             config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
                 this.selectableDatesData.push(selectableDate);
             });
@@ -382,25 +382,25 @@ export default {
                 }
             }
 
-            const monthEndDate = new Date(yearNum, monthIndex, 0); // BOTH
+            const monthEndDate = new Date(yearNum, monthIndex, 0);
-            let monthEndDateNum = monthEndDate.getDate(); // BOTH
+            let monthEndDateNum = monthEndDate.getDate();
 
             if (
                 offset === 0 &&
                 calendarViewDirection === "past" &&
                 monthEndDateNum > this.currentWeekEndDateNum
             ) {
-                monthEndDateNum = this.currentWeekEndDateNum; // PAST
+                monthEndDateNum = this.currentWeekEndDateNum;
             }
 
             const monthStartDateNum =
                 offset === 0 && calendarViewDirection === "future"
                     ? this.currentWeekStartDateNum
-                    : 1; // FUTURE
+                    : 1;
-            const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum); // BOTH
+            const monthStartDate = new Date(yearNum, monthIndex - 1, monthStartDateNum);
 
-            const startDateDayIndex = monthStartDate.getDay(); // FUTURE
+            const startDateDayIndex = monthStartDate.getDay();
-            const endDateDayIndex = monthEndDate.getDay(); // PAST
+            const endDateDayIndex = monthEndDate.getDay();
 
             if (Math.abs(offset) === 1 && hideSecondMonth) {
                 monthClass = monthClass + " month-hidden";
@@ -424,7 +424,7 @@ export default {
             // populate dates array
             for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
                 let dayClasses = "";
-                let dateString =
+                const dateString =
                     yearNum.toString() +
                     "-" +
                     forceTwoDigitString(monthIndex) +
@@ -514,7 +514,7 @@ export default {
                     monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString
                 );
                 this.isLoading = false;
-                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this removes hidden styling on days
+                this.hideSomeDaysForInitialView = false; // if hid days on initial partial view, this will reveal those days
                 monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
                 this.scrollToElement(monthToShow.monthString);
 
@@ -526,7 +526,8 @@ export default {
             const moreSelectableDates = await this.customSelectableDatesCallback(
                 monthStart,
                 monthEnd,
-                this.$store.getters.order.serviceLocation.appointmentType
+                this.$store.getters.order.serviceLocation.appointmentType,
+                this.$store.getters.order.serviceLocation.provider.providerNumber
             );
             moreSelectableDates.days.forEach((selectableDate) => {
                 const index = this.selectableDatesData.findIndex(

src/digital-components/text-block/text-block.vue

@@ -10,7 +10,7 @@ export default {
     name: "textBlock",
     props: {
         customText: String, // used to allow the insert of token values into textblock
-        justifyText: String, // left, right, center
+        justifyText: String, // right, center (left is default)
         typeStyle: String, // h1-h6, body, small, label, caption (see Figma or Confluence documentation)
         fontWeight: String, // bold=500, default is 400
         cmsWidgetName: String,
@@ -28,15 +28,11 @@ export default {
 
 <style lang="scss" scoped>
 .text-block {
-    display: flex;
-    &.left {
-        justify-content: flex-start;
-    }
     &.right {
-        justify-content: flex-end;
+        text-align: right;
     }
     &.center {
-        justify-content: center;
+        text-align: center;
     }
     &.bold {
         font-weight: 500;

src/layouts/demo-date-picker/demo-date-picker.spec.js

@@ -1,19 +0,0 @@
-import demoDatePicker from "./demo-date-picker";
-
-// Supporting Files
-import { shallowMount } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
-
-describe("demo-date-picker.vue", () => {
-    test.only("test TK...", () => {});
-});
-
-function setupMocks({ mountOptionsMockData = {} }) {
-    const mountOptions = getMountOptions({
-        ...mountOptionsMockData,
-    });
-
-    const wrapper = shallowMount(demoDatePicker, mountOptions);
-
-    return { wrapper };
-}

src/layouts/demo-date-picker/demo-date-picker.vue

@@ -1,90 +0,0 @@
-<template>
-    <div class="page-container-grouped-styles">
-        <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
-        <div class="">
-            <div class="rounded text-center">
-                <div class="fade-on-route-transition">
-                    <date-picker
-                        selectableDates="custom"
-                        v-model="selectedDate"
-                        :customSelectableDatesCallback="getAvailableDates" />
-                    <!-- EXAMPLE THAT OVERRIDES TODAY BY PASSING STRING --
-                    <date-picker
-                        selectableDates="custom"
-                        v-model="selectedDate"
-                        :customSelectableDatesCallback="getAvailableDates"
-                        todayOverrideDateString="2022-12-30T03:00:00" /> -->
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-// Components
-import datePicker from "@/digital-components/date-picker/date-picker";
-import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
-import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
-import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
-
-// Supporting files
-import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
-import { settleAllPromises } from "@/helpers/layout-helper";
-import { storeActions } from "@/constants/store-actions";
-import store from "@/store";
-
-import baseMixin from "@/mixins/base-mixin";
-
-export default {
-    name: "demo-date-picker",
-    data() {
-        return {
-            selectedDate: null,
-            // selectedDate: {  // USE THIS FORMAT FOR A PRE-SELECTED DATE ON LOAD
-            //     year: 2023,
-            //     month: 3, // use 1-based index for months
-            //     date: 21,
-            // },
-            mockSelectableDatesData: [
-                { year: 2023, month: 3, date: 4 },
-                { year: 2023, month: 3, date: 5 },
-                { year: 2023, month: 3, date: 22 },
-                { year: 2023, month: 4, date: 13 },
-                { year: 2023, month: 4, date: 7 },
-                { year: 2023, month: 4, date: 14 },
-                { year: 2023, month: 4, date: 26 },
-                { year: 2023, month: 5, date: 21 },
-                { year: 2023, month: 5, date: 23 },
-                { year: 2023, month: 5, date: 25 },
-            ],
-        };
-    },
-    computed: {
-        todayDate() {
-            const today = new Date();
-            return today.toDateString();
-        },
-    },
-    methods: {
-        arePagePrerequisitesValid() {
-            return true;
-        },
-        getAvailableDates(startDate, endDate) {
-            this.mockSelectableDatesData.push(endDate);
-            // ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-            // temporary test method that adds endDate to list of selectable dates
-            return this.mockSelectableDatesData;
-        },
-    },
-    components: {
-        datePicker,
-        funnelHeader,
-    },
-};
-</script>
-
-<style lang="scss">
-// .page-container-grouped-styles {
-//     padding: 0 .5rem !important;
-// }
-</style>

src/layouts/quote/cash-or-insurance-question/cash-or-insurance-question.vue

@@ -5,7 +5,7 @@
             :groupName="groupName"
             buttonTypeString="listButtonHorizontal"
             v-model="selectedValues"
-            :additionalButtonData="{ additionalButtonStyling: 'listButtonHorizontalStrong' }"
+            :additionalButtonData="additionalButtonData"
             isRequired />
     </div>
 </template>
@@ -27,6 +27,11 @@ export default {
         answersFromCms() {
             return this.getCmsContent(this.cmsWidgetName, "Answers");
         },
+        additionalButtonData() {
+            return {
+                additionalButtonStyling: "listButtonHorizontalStrong",
+            };
+        },
         selectedValues: {
             get: function () {
                 // Convert to CMS answer name from bool

src/layouts/schedule/constants/schedule-constants.js

@@ -0,0 +1,11 @@
+const AppointmentTypeStrings = {
+    IN_SHOP: "Inshop",
+    MOBILE: "Mobile",
+    DROP_OFF: "Dropoff",
+};
+
+const PREMIUM_TIME_SLOT_ID_FLAG = "-premium";
+
+const PREMIUM_FEE_PART_TYPE = "EARLY BIRD";
+
+export { AppointmentTypeStrings, PREMIUM_TIME_SLOT_ID_FLAG, PREMIUM_FEE_PART_TYPE };

src/layouts/schedule/schedule.vue

@@ -25,17 +25,17 @@
                 v-model="selectedDate"
                 :customSelectableDatesCallback="getAvailableDatesMethod"
                 @date-clicked="openInshopTimeSlotsModal" />
-            <!-- todayOverrideDateString="2023-08-06T03:00:00" -->
             <time-slot-modal-question
                 ref="timeSlotModalQuestion"
                 cmsWidgetName="TimeSlotModalQuestion"
-                earlyBirdCmsWidgetName="EarlyBirdTimeSlotModal"
+                mobilePremiumCmsWidgetName="EarlyBirdTimeSlotModal"
                 mobileCmsWidgetName="MobileTimeSlotModal"
                 dropoffCmsWidgetName="DropOffTimeSlotModal"
-                v-model="selectedTimeSlotId"
+                sameDayDropOffCmsWidgetName="SameDayDropOffTimeSlotModal"
+                v-model="selectedTimeSlotData"
                 @time-slot-modal-closed="timeSlotModalClosed"
                 :appointmentType="appointmentType"
-                :mobileEarlyBirdFee="mobileEarlyBirdFee"
+                :premiumAppointmentFee="mobilePremiumAppointmentFee"
                 :dateAndTimeSlotData="timeSlotsForSelectedDate"
                 :estimatedServiceMinutesMinimum="selectableDatesData.estimatedServiceMinutesMinimum"
                 :estimatedServiceMinutesMaximum="selectableDatesData.estimatedServiceMinutesMaximum"
@@ -73,6 +73,7 @@ import {
     getRouterLinkRouteFromCopy,
     getRouterLinkDisplayTextFromCopy,
 } from "@/helpers/cms-content-helper";
+import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "./constants/schedule-constants";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
 import store from "@/store";
@@ -80,18 +81,33 @@ import store from "@/store";
 defineRule("date-required", required(errorMessages.DATE_REQUIRED));
 defineRule("time-slot-selection-required", required(errorMessages.DATE_REQUIRED));
 
-const getAvailableDates = async (startDate, endDate, appointmentType) => {
+const getAvailableDates = async (startDate, endDate, appointmentType, providerNumber) => {
     // USING DATES PASSED, MAKE AN API CALL
-    const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
+
-        storeActions.GET_SHOP_TIME_SLOTS,
+    let newTimeSlotsResponse;
-        {
+    if (appointmentType === AppointmentTypeStrings.MOBILE) {
-            startDate: startDate,
+        newTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
-            endDate: endDate,
+            storeActions.GET_MOBILE_TIME_SLOTS,
-            shopAppointmentType: appointmentType,
+            {
-        },
+                startDate: startDate,
-        false
+                endDate: endDate,
-    );
+            },
-    const newShopTimeSlots = newShopTimeSlotsResponse.data;
+            false
+        );
+    } else {
+        newTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
+            storeActions.GET_SHOP_TIME_SLOTS,
+            {
+                startDate: startDate,
+                endDate: endDate,
+                shopAppointmentType: appointmentType,
+                providerNumber: providerNumber,
+            },
+            false
+        );
+    }
+
+    const newShopTimeSlots = newTimeSlotsResponse.data;
     return convertApiResponse(newShopTimeSlots);
 };
 const convertApiResponse = (responseData) => {
@@ -112,9 +128,12 @@ export default {
     data() {
         return {
             selectedDate: null,
-            selectedTimeSlotId: null,
+            selectedTimeSlotData: {
+                id: null,
+                isPremiumAppointment: null,
+            },
             selectableDatesData: [],
-            mobileEarlyBirdFee: null,
+            mobilePremiumAppointmentFee: null,
         };
     },
     async beforeRouteEnter(to, from, next) {
@@ -125,40 +144,29 @@ export default {
             selectableDatesSetting: "custom",
             initialViewRowsToShow: 5,
             customSelectableDatesCallback: getAvailableDates,
-
-            /* vvvvv SAVE THESE FOR TESTING PURPOSES FOR NOW vvvvv
-
-            // todayOverrideDateString: "2023-04-29T03:00:00",  // show partial
-            // todayOverrideDateString: "2023-04-30T03:00:00",  //
-            // todayOverrideDateString: "2023-05-02T03:00:00",  // ONE MONTH ONLY
-            // todayOverrideDateString: "2023-05-06T03:00:00",  // ONE MONTH ONLY
-            // todayOverrideDateString: "2023-05-07T03:00:00",  // show partial
-            // todayOverrideDateString: "2023-05-30T03:00:00",  //
-            // todayOverrideDateString: "2023-06-30T03:00:00",  //
-            // todayOverrideDateString: "2023-07-01T03:00:00",  // show partial && ONE MONTH ONLY
-            // todayOverrideDateString: "2023-07-02T03:00:00",  // ONE MONTH ONLY
-            // todayOverrideDateString: "2023-07-12T03:00:00",  // show partial
-            // todayOverrideDateString: "2023-08-31T03:00:00",
-            // todayOverrideDateString: "2023-09-30T03:00:00",  // show partial
-            */
         });
 
         // Price EARLY BIRD pre-emptively to allow for asynchronous call to pricing
         const pricingPromise = baseMixin.methods.dispatchStoreAction(
             storeActions.PRICE_ORDER_ITEMS_AND_SAVE_SERVER_DATA,
             {
-                availableLineItems: [{ partNumber: "EARLY BIRD" }],
+                availableLineItems: [
+                    {
+                        partNumber: PREMIUM_FEE_PART_TYPE,
+                        partType: PREMIUM_FEE_PART_TYPE,
+                        description: null,
+                    },
+                ],
             },
             false
         );
 
-        const earlyBirdPromise = baseMixin.methods.dispatchStoreAction(
+        const premiumFeePromise = baseMixin.methods.dispatchStoreAction(
             storeActions.GET_MOBILE_EARLY_BIRD_FEE
         );
         const alertReasonsPromise = locationAlerts.methods.loadInitialData(
             store.getters.order.serviceLocation.zipCodeCtu
         );
-
         // Settle promises and get results
         const promiseResultMap = [
             {
@@ -174,8 +182,8 @@ export default {
                 promise: datePickerInitialDataPromise,
             },
             {
-                resultKey: "earlyBird",
+                resultKey: "premiumFee",
-                promise: earlyBirdPromise,
+                promise: premiumFeePromise,
             },
             {
                 resultKey: "pricingResults",
@@ -191,8 +199,8 @@ export default {
             vm.$refs.datePicker.initializeComponent(resultMap.datePickerInitialData);
             vm.$refs.locationAlerts.initializeComponent(resultMap.alertReasons);
             vm.selectableDatesData = resultMap.datePickerInitialData.initialShopTimeSlotsResponse;
-            if (resultMap.earlyBird) {
+            if (resultMap.premiumFee) {
-                vm.mobileEarlyBirdFee = resultMap.pricingResults[0];
+                vm.mobilePremiumAppointmentFee = resultMap.pricingResults[0];
             }
         });
     },
@@ -216,18 +224,18 @@ export default {
             );
         },
         appointmentDateAndTime() {
-            if (!this.selectedTimeSlotId) {
+            if (!this.selectedTimeSlotData.id) {
                 return null;
             }
             const timeSlotSelectedObject = this.getTimeSlotObjectFromTimeSlotId(
-                this.selectedTimeSlotId
+                this.selectedTimeSlotData.id
             );
             if (timeSlotSelectedObject) {
                 return {
                     date: this.selectedDate.dateString,
                     startTime: timeSlotSelectedObject.startTime,
                     endTime: timeSlotSelectedObject.endTime,
-                    id: this.selectedTimeSlotId,
+                    id: this.selectedTimeSlotData.id,
                 };
             } else {
                 return null;
@@ -247,7 +255,8 @@ export default {
             const newShopTimeSlots = await getAvailableDates(
                 startDate,
                 endDate,
-                this.appointmentType
+                this.appointmentType,
+                this.$store.getters.order.serviceLocation.provider.providerNumber
             );
             // ADD API CALL RESULTS TO EXISTING DATE DATA
             this.selectableDatesData.days = this.selectableDatesData.days.concat(
@@ -268,11 +277,63 @@ export default {
             return timeSlots.find((timeSlot) => timeSlot.id === timeSlotId);
         },
         timeSlotModalClosed() {
-            // Clear the selectedDate if no timeslot has been selected
+            // Clear the selectedDate if no timeSlot has been selected
-            if (!this.selectedTimeSlotId) {
+            if (!this.selectedTimeSlotData.id) {
                 this.selectedDate = null;
             }
         },
+        updateFooterButtonText(timeSlotData) {
+            let funnelFooterButtonText;
+            if (!timeSlotData.id) {
+                funnelFooterButtonText = "Continue";
+            } else {
+                funnelFooterButtonText =
+                    "Select " + this.convertSelectedDateToShortMonthAndDay(this.selectedDate);
+
+                if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
+                    funnelFooterButtonText +=
+                        " at " +
+                        this.getDisplayTextForMilitaryTime(this.appointmentDateAndTime.startTime);
+                } else if (
+                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                    !timeSlotData.isPremiumAppointment
+                ) {
+                    funnelFooterButtonText +=
+                        " at " +
+                        this.getDisplayTextForMilitaryTime(
+                            this.appointmentDateAndTime.startTime,
+                            true
+                        ) +
+                        " - " +
+                        this.getDisplayTextForMilitaryTime(
+                            this.appointmentDateAndTime.endTime,
+                            true
+                        );
+                }
+            }
+
+            this.$refs.funnelFooter.updateButtonText(funnelFooterButtonText);
+        },
+        convertSelectedDateToShortMonthAndDay(selectedDate) {
+            // This conversion ensures we don't get get GMT induced date changes
+            const dateObject = new Date(`${selectedDate.dateString}T00:00:00`);
+            // Ex: April 25
+            return dateObject.toLocaleDateString("en-us", { month: "short", day: "numeric" });
+        },
+        // Expected input: "HH:MM:SS"
+        getDisplayTextForMilitaryTime(militaryTimeInput, shouldTrimMinutesIfEmpty = false) {
+            let hours = parseInt(militaryTimeInput.split(":")[0]);
+            const minutes = militaryTimeInput.split(":")[1];
+            let 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.$route);
         },
@@ -296,9 +357,15 @@ export default {
         selectedDate(newValue, oldValue) {
             // Clear time slot selection if date selected changes
             if (newValue !== oldValue) {
-                this.selectedTimeSlotId = null;
+                this.selectedTimeSlotData = {
+                    id: null,
+                    isPremiumAppointment: null,
+                };
             }
         },
+        selectedTimeSlotData() {
+            this.updateFooterButtonText(this.selectedTimeSlotData);
+        },
     },
     components: {
         funnelHeader,

src/layouts/schedule/time-slot-modal-question/time-slot-modal-list-button/time-slot-modal-list-button.vue

@@ -6,45 +6,32 @@
         <div
             :aria-label="buttonLabel"
             class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
-            <span class="m-0" :class="textPosition">
+            <span class="m-0 position-relative" :class="textPosition">
                 {{ buttonLabel }}
-            </span>
+                <span
-            <span v-if="buttonLabelSubCopy" class="m-0 small" :class="textPosition">
+                    v-if="buttonLabelSubCopy"
-                {{ formattedButtonLabelSubCopy }}
+                    class="premium-appointment-price"
+                    :class="textPosition">
+                    {{ formattedButtonLabelSubCopy }}
+                </span>
             </span>
             <span v-if="screenReaderOnlyText" class="sr-only">
                 {{ screenReaderOnlyText }}
             </span>
-            <loader
-                v-if="isLoaderDisplayed && selectingInitiatesLoad"
-                :class="[this.loaderColor, this.loaderPosition]" />
         </div>
     </baseInputButton>
 </template>
 
 <script>
-import loader from "@/ux-components/loader/loader";
 import baseInputButton from "@/digital-components/base-input-button/base-input-button";
 import inputButtonWrapperMixin from "@/mixins/input-button-wrapper-mixin";
 
 export default {
-    name: "timeslotMOdalListButton",
+    name: "timeSlotModalListButton",
     mixins: [inputButtonWrapperMixin],
-    props: {
-        loaderColor: String,
-        loaderPosition: {
-            type: String,
-            default: "right",
-        },
-    },
-    data() {
-        return {
-            isLoaderDisplayed: false,
-        };
-    },
     computed: {
         formattedButtonLabelSubCopy() {
-            return this.buttonLabelSubCopy?.toFixed(2);
+            return this.buttonLabelSubCopy;
         },
     },
     methods: {
@@ -58,16 +45,12 @@ export default {
         },
     },
     components: {
-        loader,
         baseInputButton,
     },
 };
 </script>
 
 <style lang="scss" scoped>
-.loader {
-    position: absolute;
-}
 .list-button {
     outline: none;
     input[type="radio"],
@@ -85,6 +68,9 @@ export default {
             font-weight: 500;
             background: $blue-100;
             box-shadow: 0 0 0 1px $blue;
+            span.premium-appointment-price {
+                background: $green-200;
+            }
         }
         &:checked:focus + .list-button-content {
             box-shadow: 0 0 0 2.5px $blue;
@@ -109,11 +95,20 @@ export default {
     width: 100%;
     outline: none;
 
-    span {
+    span.premium-appointment-price {
-        &.small {
+        position: absolute;
-            font-size: 0.75rem;
+        background: $green-100;
-            color: $gray-550;
+        border-radius: 4.5rem;
-        }
+        line-height: 1.25rem;
+        color: $green-700;
+        font-size: 0.75rem;
+        margin-left: 4px;
+        padding: 2px 8px;
+        font-weight: 500;
     }
 }
+
+.position-relative {
+    position: relative;
+}
 </style>

src/layouts/schedule/time-slot-modal-question/time-slot-modal-question.vue

@@ -14,12 +14,12 @@
             typeStyle="small"
             class="duration-text-block" />
         <buttonQuestion
-            buttonTypeString="timeslotModalListButton"
+            buttonTypeString="timeSlotModalListButton"
-            :buttonTypeObject="timeslotModalListButton"
+            :buttonTypeObject="timeSlotModalListButton"
             :answers="availableTimeSlots"
             groupName="ChooseTimeSlot"
             textPosition="text-center"
-            v-model="selectedTimeSlot"
+            v-model="selectedTimeSlotId"
             isRequired
             validationRules="time-slot-required"
             class="mt-5" />
@@ -41,7 +41,7 @@
 import modal from "@/digital-components/modal/modal";
 import textBlock from "@/digital-components/text-block/text-block";
 import buttonQuestion from "@/digital-components/button-question/button-question";
-import timeslotModalListButton from "./timeslot-modal-list-button/timeslot-modal-list-button";
+import timeSlotModalListButton from "./time-slot-modal-list-button/time-slot-modal-list-button";
 
 // TODO: Move this somewhere more global
 import { DAYS_OF_WEEK, MONTHS_OF_YEAR } from "@/digital-components/date-picker/mixins/constants.js";
@@ -49,15 +49,17 @@ import { defineRule, useField } from "vee-validate";
 import { errorMessages } from "@/constants/error-messages";
 import { required } from "@/helpers/validation-rules";
 
+// Constants
+import {
+    AppointmentTypeStrings,
+    PREMIUM_TIME_SLOT_ID_FLAG,
+    PREMIUM_FEE_PART_TYPE,
+} from "../constants/schedule-constants";
+
 // Validation for the modal button
 defineRule("time-slot-required", required(errorMessages.OPTION_REQUIRED));
 
 // Constants
-const AppointmentTypeStrings = {
-    IN_SHOP: "Inshop",
-    MOBILE: "Mobile",
-    DROP_OFF: "Dropoff",
-};
 
 export default {
     name: "timeSlotModalQuestion",
@@ -65,19 +67,21 @@ export default {
         modelValue: Object,
         cmsWidgetName: String,
         mobileCmsWidgetName: String,
-        earlyBirdCmsWidgetName: String,
+        mobilePremiumCmsWidgetName: String,
         dropoffCmsWidgetName: String,
+        sameDayDropOffCmsWidgetName: String,
         appointmentType: String,
         dateAndTimeSlotData: Object,
-        mobileEarlyBirdFee: Object,
+        premiumAppointmentFee: Object,
         estimatedServiceMinutesMinimum: Number,
         estimatedServiceMinutesMaximum: Number,
         validationRules: String,
     },
     data() {
         return {
-            selectedTimeSlot: null,
+            selectedTimeSlotId: null,
-            timeslotModalListButton: timeslotModalListButton,
+            isSelectedAppointmentPremium: null,
+            timeSlotModalListButton: timeSlotModalListButton,
         };
     },
     setup(props) {
@@ -89,42 +93,35 @@ export default {
     },
     watch: {
         modelValue() {
-            this.selectedTimeSlot = this.modelValue;
             // Run component validation that is used at parent level
-            this.handleChange(this.modelValue);
+            this.handleChange(this.modelValue.id);
+        },
+        dateAndTimeSlotData(newValue, oldValue) {
+            this.autoSelectTimeSlotIfOnlyOneIsAvailable(newValue);
         },
-        // dateAndTimeSlotData(newValue, oldValue) {
-        //     const numberOfOptions = newValue?.timeSlots.length;
-        //     console.log('running');
-        //     if (numberOfOptions === 1) {
-        //         this.selectedTimeSlot = newValue.timeSlots[0].id;
-        //     }
-        // }
     },
     computed: {
         supplementalInformationBlock() {
             let appointmentTypeCmsWidgetName;
-            let cmsFieldName = "BodyText";
             if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
                 return null;
             } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
                 appointmentTypeCmsWidgetName =
-                    this.selectedTimeSlot === this.earlyBirdButtonText
+                    this.selectedTimeSlotId === this.premiumAppointmentButtonText
-                        ? this.earlyBirdCmsWidgetName
+                        ? this.mobilePremiumCmsWidgetName
                         : this.mobileCmsWidgetName;
             } else {
-                appointmentTypeCmsWidgetName = this.dropoffCmsWidgetName;
+                appointmentTypeCmsWidgetName = this.isSameDay
-                if (this.isSameDay) {
+                    ? this.sameDayDropOffCmsWidgetName
-                    cmsFieldName = "BodyText2";
+                    : this.dropoffCmsWidgetName;
-                }
             }
-            return this.getCmsContent(appointmentTypeCmsWidgetName, cmsFieldName);
+            return this.getCmsContent(appointmentTypeCmsWidgetName, "BodyText");
         },
         footerCloseButtonText() {
             return this.getCmsContent(this.cmsWidgetName, "FooterText");
         },
-        earlyBirdButtonText() {
+        premiumAppointmentButtonText() {
-            return this.getCmsContent(this.earlyBirdCmsWidgetName, "HeaderText");
+            return this.getCmsContent(this.mobilePremiumCmsWidgetName, "HeaderText");
         },
         dropoffButtonText() {
             return this.getCmsContent(this.dropoffCmsWidgetName, "HeaderText");
@@ -167,53 +164,24 @@ export default {
             }
             // This conversion ensures we don't get get GMT induced date changes
             const dateObject = new Date(`${this.dateAndTimeSlotData.dateString}T00:00:00`);
-            const weekdayName = DAYS_OF_WEEK[dateObject.getDay()];
+            // Ex: Tuesday, April 22
-            const month = MONTHS_OF_YEAR[dateObject.getMonth()];
+            return dateObject.toLocaleDateString("en-us", {
-            const numberDayOfMonth = dateObject.getDate();
+                weekday: "long",
-            // Ex. Tuesday, April 23
+                month: "long",
-            return `${weekdayName}, ${month} ${numberDayOfMonth}`;
+                day: "numeric",
+            });
         },
         availableTimeSlots() {
             if (this.dateAndTimeSlotData === null) {
                 return null;
             }
-            let availableTimeSlots;
             if (this.appointmentType === AppointmentTypeStrings.DROP_OFF) {
-                availableTimeSlots = [
+                return this.getAvailableTimeSlotsForDropOff(this.dateAndTimeSlotData.timeSlots);
-                    {
+            } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                        value: this.dateAndTimeSlotData.timeSlots[0],
+                return this.getAvailableTimeSlotsForMobile(this.dateAndTimeSlotData.timeSlots);
-                        buttonLabel: this.dropoffButtonText,
-                    },
-                ];
             } else {
-                availableTimeSlots = this.dateAndTimeSlotData.timeSlots.map((timeslot) => {
+                return this.getAvailableTimeSlotsForInshop(this.dateAndTimeSlotData.timeSlots);
-                    let readableTime;
-                    if (this.appointmentType === AppointmentTypeStrings.IN_SHOP) {
-                        readableTime = this.getDisplayTextForMilitaryTime(timeslot.startTime);
-                    } else if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                        readableTime = `${this.getDisplayTextForMilitaryTime(
-                            timeslot.startTime
-                        )} - ${this.getDisplayTextForMilitaryTime(timeslot.endTime)}`;
-                    }
-                    return {
-                        value: timeslot.id,
-                        buttonLabel: readableTime,
-                    };
-                });
             }
-
-            if (this.appointmentType === AppointmentTypeStrings.MOBILE) {
-                const offerPremium = this.dateAndTimeSlotData.timeSlots[0].offerPremium;
-                const hasEarlyBird = this.mobileEarlyBirdFee?.partType === "EARLY BIRD";
-                if (offerPremium && hasEarlyBird) {
-                    availableTimeSlots.unshift({
-                        value: this.dateAndTimeSlotData.timeSlots[0].id + "-earlybird",
-                        buttonLabel: this.earlyBirdButtonText,
-                        buttonLabelSubCopy: this.getTotalLineItemPrice(this.mobileEarlyBirdFee),
-                    });
-                }
-            }
-            return availableTimeSlots;
         },
     },
     methods: {
@@ -222,22 +190,36 @@ export default {
         },
         // fires any time the footer button is used, is fired before "onModalClosed"
         closeModal() {
-            this.$emit("update:modelValue", this.selectedTimeSlot);
+            if (this.selectedTimeSlotId.toString().includes(PREMIUM_TIME_SLOT_ID_FLAG)) {
+                this.selectedTimeSlotId = this.removePremiumFlagFromInput(this.selectedTimeSlotId);
+                this.isSelectedAppointmentPremium = true;
+            } else {
+                this.isSelectedAppointmentPremium = false;
+            }
+            const selectedTimeSlotData = {
+                id: this.selectedTimeSlotId,
+                isPremiumAppointment: this.isSelectedAppointmentPremium,
+            };
+            this.$emit("update:modelValue", selectedTimeSlotData);
             this.$refs["timeSlots"].closeModal();
         },
         // fires any time the modal is closed, AFTER "closeModal" fires if footer button is used
         onModalClosed() {
-            this.selectedTimeSlot = this.modelValue;
+            this.isSelectedAppointmentPremium = this.modelValue.isPremiumAppointment;
+            if (this.isSelectedAppointmentPremium) {
+                this.selectedTimeSlotId = this.addPremiumFlagToInput(this.modelValue.id);
+            } else {
+                this.selectedTimeSlotId = this.modelValue.id;
+            }
             this.$emit("time-slot-modal-closed");
         },
         // Expected input: "HH:MM:SS"
         getDisplayTextForMilitaryTime(militaryTimeInput) {
             let hours = parseInt(militaryTimeInput.split(":")[0]);
             const minutes = militaryTimeInput.split(":")[1];
-            let meridianNotation = "AM";
+            let meridianNotation = hours > 11 ? "PM" : "AM";
-            if (militaryTimeInput.split(":")[0] > 12) {
+            if (hours > 12) {
                 hours -= 12;
-                meridianNotation = "PM";
             }
             return `${hours}:${minutes} ${meridianNotation}`;
         },
@@ -252,6 +234,77 @@ export default {
             }
             return displayTextForDurationLength;
         },
+        getAvailableTimeSlotsForInshop(timeSlotsForSelectedDate) {
+            return timeSlotsForSelectedDate.map((timeSlot) => {
+                const readableTime = this.getDisplayTextForMilitaryTime(timeSlot.startTime);
+                return {
+                    value: timeSlot.id,
+                    buttonLabel: readableTime,
+                };
+            });
+        },
+        getAvailableTimeSlotsForDropOff(timeSlotsForSelectedDate) {
+            return [
+                {
+                    value: timeSlotsForSelectedDate[0].id,
+                    buttonLabel: this.dropoffButtonText,
+                },
+            ];
+        },
+        getAvailableTimeSlotsForMobile(timeSlotsForSelectedDate) {
+            const availableTimeSlots = timeSlotsForSelectedDate.map((timeSlot) => {
+                const readableTime = `${this.getDisplayTextForMilitaryTime(
+                    timeSlot.startTime
+                )} - ${this.getDisplayTextForMilitaryTime(timeSlot.endTime)}`;
+                return {
+                    value: timeSlot.id,
+                    buttonLabel: readableTime,
+                };
+            });
+
+            const isPremiumTimeSlot = timeSlotsForSelectedDate[0].offerPremium;
+            const hasPremiumPartAvailable =
+                this.premiumAppointmentFee?.partType === PREMIUM_FEE_PART_TYPE;
+            if (isPremiumTimeSlot && hasPremiumPartAvailable) {
+                availableTimeSlots.unshift(
+                    this.getPremiumAppointmentTimeSlot(timeSlotsForSelectedDate[0])
+                );
+            }
+
+            return availableTimeSlots;
+        },
+        getPremiumAppointmentTimeSlot(timeSlotData) {
+            const formattedPrice =
+                "+$" + this.getTotalLineItemPrice(this.premiumAppointmentFee).toFixed(2);
+            return {
+                // Unique value is required for each <input> and the premium appoinment shares a timeSlot ID
+                value: this.addPremiumFlagToInput(timeSlotData.id),
+                buttonLabel: this.premiumAppointmentButtonText,
+                buttonLabelSubCopy: formattedPrice,
+                additionalButtonData: {
+                    isPremiumAppointment: true,
+                },
+            };
+        },
+        autoSelectTimeSlotIfOnlyOneIsAvailable(newdateAndTimeSlotDataValue) {
+            const numberOfOptions = newdateAndTimeSlotDataValue?.timeSlots.length;
+            if (
+                numberOfOptions === 1 &&
+                !(
+                    this.appointmentType === AppointmentTypeStrings.MOBILE &&
+                    this.premiumAppointmentFee &&
+                    newdateAndTimeSlotDataValue.timeSlots[0].offerPremium
+                )
+            ) {
+                this.selectedTimeSlotId = newdateAndTimeSlotDataValue.timeSlots[0].id;
+            }
+        },
+        addPremiumFlagToInput(timeSlotId) {
+            return (timeSlotId += PREMIUM_TIME_SLOT_ID_FLAG);
+        },
+        removePremiumFlagFromInput(timeSlotId) {
+            return parseInt(timeSlotId.trim(PREMIUM_TIME_SLOT_ID_FLAG.length));
+        },
     },
     components: {
         modal,

src/layouts/service-location/helpers/service-location-helper/service-location-helper.js

@@ -44,7 +44,7 @@ export async function getServiceabilityDetails(serviceZipCode, lineItems) {
     return Promise.resolve(serviceabilityDetails);
 }
 
-export async function getAvailabilityRating(providerNumber, startDate, endDate, appointmentType) {
+export async function getAvailabilityRating(startDate, endDate, shopAppointmentType, providerNumber) {
     // For a given shop provider number and date range, get the appointment time slots available
     const shopTimeSlots = await baseMixin.methods.dispatchStoreAction(
         storeActions.GET_SHOP_TIME_SLOTS,
@@ -52,7 +52,7 @@ export async function getAvailabilityRating(providerNumber, startDate, endDate,
             providerNumber: providerNumber,
             startDate: startDate,
             endDate: endDate,
-            shopAppointmentType: appointmentType,
+            shopAppointmentType: shopAppointmentType,
         },
         false
     );

src/layouts/service-location/mobile-location-modal-questions/mobile-location-modal-questions.vue

@@ -236,6 +236,17 @@ export default {
             });
         },
         async setMobileLocation() {
+            // START - TEMP CODE FROM A CAOUETTE 5/25/23 TO BE REMOVED BY EOD
+            let tempTest = false;
+            let internalModelAddressQuestions = this.internalModel.addressQuestions;
+            let modelValueAddressQuestions = this.modelValue.addressQuestions;
+            if (tempTest) {
+                // THIS WILL NEVER BE TRUE
+                console.warn(internalModelAddressQuestions);
+                console.warn(modelValueAddressQuestions);
+            }
+            // END - TEMP CODE FROM A CAOUETTE 5/25/23 TO BE REMOVED BY EOD
+
             if (
                 this.internalModel.addressQuestions.zipCode !==
                 this.modelValue.addressQuestions.zipCode
@@ -270,6 +281,13 @@ export default {
 
                     this.closeModal();
                 }
+            } else {
+                // START - TEMP CODE FROM A CAOUETTE 5/25/23 TO BE REMOVED BY EOD
+                if (tempTest) {
+                    // THIS WILL NEVER BE TRUE
+                    console.warn("the zips match and the exception was run");
+                }
+                // END - TEMP CODE FROM A CAOUETTE 5/25/23 TO BE REMOVED BY EOD
             }
         },
     },

src/layouts/service-location/shop-question/shop-list-button/shop-list-button.vue

@@ -52,9 +52,14 @@ export default {
     props: {
         loaderColor: String,
     },
-    async beforeMount() {
+    beforeMount() {
         this.displayLoader();
-        this.additionalButtonData.availabilityRatingCallback(this.modelValue).then((data) => {
+        console.log(this.value)
+        const startDate = this.additionalButtonData.startDate;
+        const endDate = this.additionalButtonData.endDate;
+        const shopAppointmentType = this.additionalButtonData.shopAppointmentType;
+
+        this.additionalButtonData.availabilityRatingCallback(startDate, endDate, shopAppointmentType, this.value).then((data) => {
             this.availabilityRating = data;
             this.isLoaderDisplayed = false;
         });
@@ -66,7 +71,7 @@ export default {
             availabilityRating: "None",
             availabilityRatingClass: "",
             loaderPosition: "left",
-            blockUi: "no-block"
+            blockUi: "no-block",
         };
     },
     methods: {

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

@@ -106,8 +106,18 @@ export default {
             return this.getCmsContent("ShowMoreShopsLinkWidget", "Text");
         },
         additionalButtonData() {
+            const startDate = new Date();
+            const endDate = new Date()
+            endDate.setDate(startDate.getDate() + 7);
+
+            const formattedStartDate = startDate.toISOString().split("T")[0];
+            const formattedEndDate = endDate.toISOString().split("T")[0];
+ 
             return {
                 availabilityRatingCallback: getAvailabilityRating,
+                startDate: formattedStartDate,
+                endDate: formattedEndDate,
+                shopAppointmentType: this.selectedAppointmentType,
             };
         },
     },

src/router/index.js

@@ -28,21 +28,7 @@ import analyticsMixin from "@/mixins/analytics-mixin";
 import { experimentTriggers } from "../constants/experiments";
 import { applicationConfig } from "../constants/application-config";
 
-// Components
-import datePicker from "@/digital-components/date-picker/date-picker.vue";
-import demoDatePicker from "@/layouts/demo-date-picker/demo-date-picker.vue";
-
 const routes = [
-    {
-        path: "/demo-date-picker", // This is a temporary route for testing.
-        name: "demo-date-picker",
-        component: demoDatePicker,
-    },
-    {
-        path: "/date-picker", // This is a temporary route for testing.
-        name: "date-picker",
-        component: datePicker,
-    },
     {
         path: "/",
         name: "root",

src/store/index.js

@@ -1136,57 +1136,121 @@ export const actions = {
         });
     },
 
-    getShopTimeSlots(
+    getShopTimeSlots(context, { startDate, endDate, shopAppointmentType, providerNumber }) {
-        context,
-        {
-            providerNumber = null,
-            startDate = "2023-01-01",
-            endDate = "2023-05-01",
-            shopAppointmentType = "",
-        }
-    ) {
         const order = context.state.order;
-        const mockArray = [];
+        const vehicle = context.state.order.vehicle;
+
+        let partNumbers = [
+            ...(order.lineItems.supportingItems ?? []),
+            ...(order.lineItems.vaps ?? []),
+            ...getFlattenedArrayOfLineItemsWithChildParts(order.lineItems.glassParts),
+        ];
+        partNumbers = partNumbers.map((lineItem) => {
+            return lineItem.partNumber;
+        });
+
+        const glassPieces = order.damage.glassToReplace ?? [];
 
         var payload = {
-            providerNumber: providerNumber ?? order.providerNumber,
+            providerNumber: providerNumber,
             startDate: startDate,
             endDate: endDate,
             shopAppointmentType: shopAppointmentType,
-            applicationName: applicationConfig.APPLICATION_NAME,
+            applicationName: "Safelite.com funnel",
             parentAccountNumber: context.getters.payment.parentAccountNumber,
-            carId: context.getters.vehicle.carId,
+            carId: vehicle.carId,
-            partNumbers: mockArray, // TODO: WHERE DO I GET THIS?
+            partNumbers: partNumbers,
+            glassPieces: glassPieces,
             eon: order.eon,
-            provisionalReasons: mockArray, // TODO: WHERE DO I GET THIS?
+            coverage: {
+                status: "",
+                deductible: 0,
+                additionalAuthFlag: "",
+            },
+            partSelection: {
+                // TODO: Provisional booking will utilize these fields
+                hasAnsweredPartQuestions: false,
+                hasAnsweredMoldingQuestions: false,
+                hasAnsweredCapabilityQuestions: false,
+                hasManuallySelectedParts: false,
+            },
+            vehicle: {
+                year: vehicle.year,
+                make: vehicle.make,
+                model: vehicle.model,
+                style: vehicle.style,
+                vin: vehicle.vin,
+            },
         };
 
-        // TODO: REMOVE MOCK CALL & USE REAL CALL BELOW
+        console.log(payload)
-        return globalMethods.callMockHttpClient({
+
+        return globalMethods.callHttpClient({
             method: endpoints.GetShopTimeSlots.method,
-            endpoint: endpoints.GetShopTimeSlots.mockUrl,
+            endpoint: endpoints.GetShopTimeSlots.url,
             payload: payload,
+            logApiCall: false,
+        });
+    },
+
+    getMobileTimeSlots(context, { startDate, endDate }) {
+        const order = context.state.order;
+        const vehicle = context.state.order.vehicle;
+        let partNumbers = [
+            ...(order.lineItems.supportingItems ?? []),
+            ...(order.lineItems.vaps ?? []),
+            ...getFlattenedArrayOfLineItemsWithChildParts(order.lineItems.glassParts),
+        ];
+        partNumbers = partNumbers.map((lineItem) => {
+            return lineItem.partNumber;
+        });
+        const glassPieces = order.damage.glassToReplace ?? [];
+        var payload = {
+            startDate: startDate,
+            endDate: endDate,
+            applicationName: "Safelite.com funnel",
+            parentAccountNumber: context.getters.payment.parentAccountNumber,
+            carId: vehicle.carId,
+            partNumbers: partNumbers,
+            glassPieces: glassPieces,
+            eon: order.eon,
+            coverage: {
+                status: "",
+                deductible: 0,
+                additionalAuthFlag: "",
+            },
+            partSelection: {
+                // TODO: Provisional booking will utilize these fields
+                hasAnsweredPartQuestions: false,
+                hasAnsweredMoldingQuestions: false,
+                hasAnsweredCapabilityQuestions: false,
+                hasManuallySelectedParts: false,
+            },
+            vehicle: {
+                year: vehicle.year,
+                make: vehicle.make,
+                model: vehicle.model,
+                style: vehicle.style,
+                vin: vehicle.vin,
+            },
+            zipCode: order.serviceLocation.zipCode,
+        };
+        return globalMethods.callHttpClient({
+            method: endpoints.GetMobileTimeSlots.method,
+            endpoint: endpoints.GetMobileTimeSlots.url,
+            payload: payload,
+            logApiCall: false,
         });
-        // TODO: RESTORE THIS
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetShopTimeSlots.method,
-        //     endpoint: endpoints.GetShopTimeSlots.url,
-        //     payload: payload,
-        //     logApiCall: false,
-        // });
     },
 
     getMobileEarlyBirdFee(context) {
         const damageType = context.getters.damage.isRepair ? "Repair" : "Replace";
         const paymentType = context.getters.order.payment.isInsurance ? "Insurance" : "Cash";
-        return globalMethods.callMockHttpClient({
+
+        return globalMethods.callHttpClient({
             method: endpoints.GetMobileEarlyBirdFee.method,
-            endpoint: `${endpoints.GetMobileEarlyBirdFee.mockUrl}/Cash/Replace`,
+            endpoint: `${endpoints.GetMobileEarlyBirdFee.url}/${paymentType}/${damageType}`,
         });
-        // return globalMethods.callHttpClient({
-        //     method: endpoints.GetMobileEarlyBirdFee.method,
-        //     endpoint: `${endpoints.GetMobileEarlyBirdFee.url}/${paymentType}/${damageType}`,
-        // });
     },
 
     // Session API Actions
@@ -1913,7 +1977,7 @@ function addPricesToLineItems(lineItems, pricingLineItems) {
 
 function getFlattenedArrayOfLineItemsWithChildParts(lineItems) {
     let flattenedArray = [];
-    lineItems.forEach((lineItem) => {
+    lineItems?.forEach((lineItem) => {
         flattenedArray.push(lineItem);
         if (lineItem.childParts) {
             flattenedArray = [

src/ux-components/loader/loader.vue

@@ -21,8 +21,8 @@ export default {
         },
         blockUi: {
             type: Boolean,
-            default: true
+            default: true,
-        }
+        },
     },
 };
 </script>