From a355b025c1d62f512b1673284ef4a1a21a3788bd Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Mon, 24 Apr 2023 12:55:37 -0400
Subject: [PATCH] CSR-1131: preliminary work on getting API call from schedule
 page to date picker

---
 src/constants/endpoints.js                    |   5 +
 src/constants/store-actions.js                |   1 +
 .../date-picker/date-picker.vue               | 262 ++++++++++++------
 src/layouts/schedule/schedule.vue             | 113 +++++++-
 src/store/index.js                            |  35 +++
 5 files changed, 319 insertions(+), 97 deletions(-)

diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js
index aaf221bd2..c317c9b90 100644
--- a/src/constants/endpoints.js
+++ b/src/constants/endpoints.js
@@ -94,6 +94,11 @@ const endpoints = {
         url: "/parts/api/v1/parts/part-from-capability-answer",
         method: "POST",
     },
+    GetShopTimeSlots: {
+        url: "/schedule/api/v1/schedule/shop-time-slots",
+        mockUrl: "https://mockey.qa.sagaws.net/service/shop-time-slots", // TODO: REMOVE MOCKURL
+        method: "POST",
+    },
     SaveSession: {
         url: "/order/api/v1/order/save-session",
         method: "POST",
diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js
index 3fc664413..52fa6d877 100644
--- a/src/constants/store-actions.js
+++ b/src/constants/store-actions.js
@@ -30,6 +30,7 @@ const storeActions = {
     GET_MOLDING_QUESTIONS: "getMoldingQuestions",
     GET_MOBILE_FEE_PART: "getMobileFeePart",
     GET_SERVICEABILITY_DETAILS: "getServiceabilityDetails",
+    GET_SHOP_TIME_SLOTS: "getShopTimeSlots",
     SAVE_SESSION: "saveSession",
     LOAD_SESSION: "loadSession",
     UPDATE_STORE_WITH_SAVE_SESSION_RESPONSE: "updateStoreWithSaveSessionResponse",
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index c808cbd64..7b8d1ea7b 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,55 +1,58 @@
 <template>
     <div class="date-picker text-center" :class="calendarViewDirection">
-        <fieldset v-if="months">
+        <!-- <p style="text-align: left">savedHeight: {{ savedHeight }}</p> -->
+        <!-- <p style="text-align: left">selectableDatesData: {{ selectableDatesData }}</p> -->
+        <!-- <p style="text-align: left">months: {{ months }}</p> -->
+        <fieldset v-if="months" id="date-picker-fieldset">
             <legend class="sr-only">Date Picker</legend>
+            <h4 id="tracker">currentScrollTop: {{ currentScrollTop }}</h4>
             <div
                 v-for="month in months"
-                :key="`${month.monthLabel}-${month.yearNum.toString()}-${months.length}`">
+                :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
+                class="calendar-grid-container position-relative"
+                :class="[
+                    isInitialView === true ? 'initial-view' : '',
+                    month.monthClass,
+                    isAddingNewMonth === true ? 'is-adding-new-month' : '',
+                ]">
+                <div class="month-year body-small d-flex align-items-center small">
+                    {{ month.monthLabel }} {{ month.yearNum?.toString() }}
+                </div>
                 <div
-                    class="calendar-grid-container position-relative"
+                    v-if="calendarViewDirection === 'future'"
+                    class="legend caption d-flex align-items-center justify-content-end">
+                    <span class="legend-circle me-1"></span> &equals; Available
+                </div>
+                <div class="separator-line"></div>
+                <div class="nav-back ps-3"><button></button></div>
+                <div class="nav-forward pe-3"><button></button></div>
+                <!-- Do the days of the weeek 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>
+                <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
+                <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
+                <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
+                <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
+                <div
+                    v-for="date in month.dates"
+                    :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
+                    class="grid-item radio-wrapper"
                     :class="[
-                        isInitialView === true ? 'initial-view' : '',
-                        month.monthClass,
-                        isAddingNewMonth === true ? 'is-adding-new-month' : '',
+                        date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
+                        date.dayClasses,
                     ]">
-                    <div class="month-year body-small d-flex align-items-center small">
-                        {{ month.monthLabel }} {{ month.yearNum.toString() }}
-                    </div>
-                    <div
-                        v-if="calendarViewDirection === 'future'"
-                        class="legend caption d-flex align-items-center justify-content-end">
-                        <span class="legend-circle me-1"></span> &equals; Available
-                    </div>
-                    <div class="separator-line"></div>
-                    <div class="nav-back ps-3"><button></button></div>
-                    <div class="nav-forward pe-3"><button></button></div>
-                    <!-- Do the days of the weeek 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>
-                    <div class="grid-item caption"><span class="sr-only">Wednesday</span>W</div>
-                    <div class="grid-item caption"><span class="sr-only">Thursday</span>T</div>
-                    <div class="grid-item caption"><span class="sr-only">Friday</span>F</div>
-                    <div class="grid-item caption"><span class="sr-only">Saturday</span>S</div>
-                    <div
-                        v-for="date in month.dates"
-                        :key="`${month.monthLabel}-${date.dateNum.toString()}-${months.length}`"
-                        class="grid-item radio-wrapper"
-                        :class="[
-                            date.dateNum === 1 ? 'first-day-' + month.startDateDayIndex : '',
-                            date.dayClasses,
-                        ]">
-                        <input
-                            :disabled="!isSelectableDate(date.inputValue)"
-                            type="radio"
-                            name="day-of-month"
-                            v-model="selectedDate"
-                            :value="date.inputValue"
-                            :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
-                        <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
-                            <span>{{ date.dateNum.toString() }}</span>
-                        </label>
-                    </div>
+                    <input
+                        :disabled="!isSelectableDate(date.inputValue)"
+                        type="radio"
+                        name="day-of-month"
+                        v-model="selectedDate"
+                        :value="date.inputValue"
+                        :id="`${month.monthLabel}-${date.dateNum.toString()}`" />
+                    <label :for="`${month.monthLabel}-${date.dateNum.toString()}`">
+                        <span>{{ date.dateNum.toString() }}</span>
+                    </label>
                 </div>
             </div>
         </fieldset>
@@ -76,7 +79,7 @@ export default {
     name: "datePicker",
     data() {
         return {
-            calendarData: [],
+            // calendarData: [],
             monthsBeforeToLoadOffset: 0,
             monthsAfterToLoadOffset: 1,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
@@ -84,10 +87,21 @@ export default {
             initialViewRowsToShow: 5,
             initialViewRowsTally: 0,
             isAddingNewMonth: false,
+
+            savedHeight: 0,
+            newestMonthId: "",
+            currentScrollTop: 0,
+            months: null, // NEW
         };
     },
+
+    mounted() {
+        this.setCalendarData();
+        // this.trackScrollTop();
+    },
+
     props: {
-        selectableDates: {
+        selectableDatesSetting: {
             type: String,
             validator(value) {
                 return Object.values(SelectableDaysOptions).includes(value);
@@ -105,6 +119,7 @@ export default {
         customSelectableDatesCallback: {
             type: Function,
             default() {
+                // console.log(" running default...")
                 return [];
             },
         },
@@ -115,15 +130,16 @@ export default {
                 ? new Date(this.todayOverrideDateString)
                 : new Date();
         },
-        months() {
-            if (this.calendarData?.length < 1) {
-                this.setCalendarData();
-            }
-            return this.calendarData;
-        },
+        // months() {
+        //     if (this.calendarData?.length < 1) {
+        //         this.setCalendarData();
+        //     }
+        //     console.log("( ( (( ( ())))))   MONTHS READY")
+        //     return this.calendarData;
+        // },
         calendarViewDirection() {
-            if (this.selectableDates === "past") return "past";
-            if (this.selectableDates === "custom") return "future";
+            if (this.selectableDatesSetting === "past") return "past";
+            if (this.selectableDatesSetting === "custom") return "future";
             return "none";
         },
         selectedDate: {
@@ -136,6 +152,12 @@ export default {
         },
     },
     methods: {
+        // setMonths() { /// NEW, ONLY RUN ON MOUNTED?
+        //     if (this.months?.length < 1) { // DO I NEED THIS CHECK, IF ONLY TRIGGERED WITH MOUNTED HOOK NOW?
+        //         this.setCalendarData();
+        //     }
+        //     // this.months = this.calendarData;
+        // },
         goForward() {
             if (this.isInitialView) {
                 this.isInitialView = false; // 1st click removes hidden styling
@@ -143,13 +165,16 @@ export default {
                 this.addMonthData(); // 2nd click adds 1 month data
             }
         },
-        setCalendarData() {
+        async setCalendarData() {
+            // console.log(" running setCalendarData.")
+            // this.selectableDatesData = this.selectableDates; // POPULATE DATA FROM PROP
+
             // GENERATE MONTHS AND PUSH THEM INTO ARRAY
             const months = [];
             if (this.calendarViewDirection === "future") {
                 // first 0, then 1
                 for (let i = 0; i <= this.monthsAfterToLoadOffset; i++) {
-                    months.push(this.getMonthData(i));
+                    months.push(await this.getMonthData(i));
                 }
             } else if (this.calendarViewDirection === "past") {
                 // first 0, then -1
@@ -162,9 +187,11 @@ export default {
                 //     months.push(this.getMonthDataPAST(i));
                 // }
             }
-            this.calendarData = months;
+            // this.calendarData = months;
+            this.months = months;
+            // console.log("    MONTHS are done    ")
         },
-        getMonthData(offset) {
+        async getMonthData(offset) {
             const direction = this.calendarViewDirection; // "past" or "future"
             let yearNum;
             let monthIndex;
@@ -198,7 +225,7 @@ export default {
 
                 if (direction === "future") {
                     // get last day of current calendar data
-                    const lastMonthInCalendarData = this.calendarData[this.calendarData.length - 1];
+                    const lastMonthInCalendarData = this.months[this.months.length - 1];
 
                     if (lastMonthInCalendarData.monthIndex === 11) {
                         monthIndex = 0;
@@ -210,7 +237,7 @@ export default {
                 }
                 if (direction === "past") {
                     // get last day of current calendar data
-                    const firstMonthInCalendarData = this.calendarData[0];
+                    const firstMonthInCalendarData = this.months[0];
 
                     if (firstMonthInCalendarData.monthIndex === 0) {
                         monthIndex = 11;
@@ -281,7 +308,7 @@ export default {
                 monthClass = monthClass + " new-month";
             }
 
-            if (this.selectableDates === "custom") {
+            if (this.selectableDatesSetting === "custom") {
                 const monthStart = {
                     year: yearNum,
                     month: monthIndex + 1,
@@ -293,18 +320,27 @@ export default {
                     date: monthEndDateNum,
                 };
                 // get available dates
-                this.updateSelectableDates(monthStart, monthEnd);
+                await this.updateSelectableDates(monthStart, monthEnd); // v v v v v v
+                                // MAKE API CALL, ADDS NEW DATES TO this.selectableDatesData
+            }
+
+            function forceTwoDigitString(monthNum) {
+                let newString = monthNum.toString();
+                return (newString.length === 1) ? "0" + newString : newString;
             }
 
             // populate datesArray
             for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
                 let dayClasses = "";
+                
                 const thisDate = {
                     // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
                     year: yearNum,
                     month: monthIndex + 1,
                     date: i,
+                    dateString: yearNum.toString() + "-" + forceTwoDigitString(monthIndex + 1) + "-" + forceTwoDigitString(i),
                 };
+                let isSelectableDate = this.isSelectableDate(thisDate);
                 if (offset === 0 && i === todayDateNum) {
                     dayClasses += "current-day";
                 }
@@ -320,9 +356,16 @@ export default {
                 if (Math.abs(offset) === 1 && direction === "past" && i < initialViewStartDate) {
                     dayClasses += "day-hidden";
                 }
-                if (this.selectableDates === "custom" && this.isSelectableDate(thisDate)) {
+                if (this.selectableDatesSetting === "custom" && isSelectableDate) {
+                    // console.log("  ! ! ! FOUND ONE! A SELECTABLE DATE  ! ! ! ! ")
                     dayClasses += " selectable-day";
                 }
+                // // TEMP CHECK
+                // if (offset === 0 && todayDateNum === 21 || offset === 0 && todayDateNum === 26) {
+                //     console.log("dayClasses are:  ", dayClasses)
+                // }
+
+                // =====
                 const dateObject = {
                     dateNum: i,
                     dayClasses: dayClasses,
@@ -340,49 +383,100 @@ export default {
                 monthClass: monthClass,
             };
 
+            // debugger; // eslint-disable-line no-debugger
+
+            // console.log(" mmm mm m mm m m m      MONTH IS READY    mm m m m m  m m m mmmm m mm")
+
             return monthToAdd;
         },
-        addMonthData() {
-            this.isAddingNewMonth = true;
+        async addMonthData() {
+            this.isAddingNewMonth = true; // TODO - DO I NEED THIS ANYMIRE?
+
+            const monthToAdd = await this.getMonthData();
+
+            this.newestMonthId = monthToAdd.monthLabel + "-" + monthToAdd.yearNum?.toString();
+            // console.log("newestMonthId: ", this.newestMonthId)
 
-            const monthToAdd = this.getMonthData();
             if (this.calendarViewDirection === "future") {
-                let month = this.calendarData[this.calendarData.length - 1];
+                let month = this.months[this.months.length - 1];
                 month.monthClass = month.monthClass.replace("new-month", "");
-                this.calendarData.push(monthToAdd);
+                this.months.push(monthToAdd);
             }
             if (this.calendarViewDirection === "past") {
-                let month = this.calendarData[0];
+                let month = this.months[0];
                 month.monthClass = month.monthClass.replace("new-month", "");
-                this.calendarData.unshift(monthToAdd);
+                this.months.unshift(monthToAdd);
             }
 
-            setTimeout(() => {
-                this.isAddingNewMonth = false;
-            }, 0.010);
+            this.isAddingNewMonth = false;
+            // scroll the next question into view
+
+            // == ATTEMPT 3
+            // this.$nextTick(() => {
+            //     // setTimeout(() => {
+            //     //     this.isAddingNewMonth = false;
+            //     // }, 0.010);
+            //     setTimeout(() => {
+            //         document.querySelector("#April-2023-3")?.scrollIntoView({ behavior: "smooth" });
+            //     }, 0.01);
+            // });
+
+            // // scroll the next question into view
+            // this.$nextTick(() => {
+            //     setTimeout(() => {
+            //         this.isAddingNewMonth = false;
+            //     }, 0.010);
+            //     setTimeout(() => {
+            //         document.querySelector(".new-month")?.scrollIntoView({ behavior: "smooth" });
+            //     }, 0.010);
+            // });
+
+            // setTimeout(() => {
+            //     this.isAddingNewMonth = false;
+            // }, 0.01);
         },
         isSelectableDate(thisDate) {
             const testForDate = (dateInArray) => {
+                
+                // console.log("      running isSelectableDate/testForDate...  thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
+                // console.log("              running isSelectableDate/testForDate...  dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
+                
+                // debugger; // eslint-disable-line no-debugger
                 return (
-                    dateInArray.date === thisDate.date &&
-                    dateInArray.month === thisDate.month &&
-                    dateInArray.year === thisDate.year
+                    dateInArray.dateString === thisDate.dateString
                 );
             };
-            const isSelectable =
-                this.selectableDatesData.findIndex(testForDate) > -1 ? true : false;
+            // function testForDateNEW(dateInArray) {
+                
+            //     console.log("      running isSelectableDate/testForDate...  thisDate.month: ", thisDate.month, " / thisDate.date: ", thisDate.date)
+            //     console.log("              running isSelectableDate/testForDate...  dateInArray.month: ", dateInArray.month, " / dateInArray.date: ", dateInArray.date)
+                
+            //     // debugger; // eslint-disable-line no-debugger
+            //     return (
+            //         dateInArray.date === thisDate.date &&
+            //         dateInArray.month === thisDate.month &&
+            //         dateInArray.year === thisDate.year
+            //     );
+            // }
+            const midTest = this.selectableDatesData.findIndex(testForDate);
+            // console.log("midTest ", midTest)
+            const isSelectable = (this.selectableDatesData.findIndex(testForDate)) > -1 ? true : false;
+                    // debugger; // eslint-disable-line no-debugger
+                    // console.log("running isSelectableDate...  thisDate: ", thisDate, " / isSelectable: ", isSelectable)
+
             return isSelectable;
         },
-        updateSelectableDates(monthStart, monthEnd) {
-            this.customSelectableDatesCallback(monthStart, monthEnd)?.forEach((newObj) => {
+        async updateSelectableDates(monthStart, monthEnd) {
+            // console.log("running DP updateSelectableDates... ")
+            const test = await this.customSelectableDatesCallback(monthStart, monthEnd);
+
+            test?.forEach((newObj) => {
                 const index = this.selectableDatesData.findIndex(
-                    (obj) =>
-                        obj.year === newObj.year &&
-                        obj.month === newObj.month &&
-                        obj.date === newObj.date
+                    (obj) => obj.dateString === newObj.dateString
                 );
                 if (index === -1) this.selectableDatesData.push(newObj);
             });
+            // console.log("running DP updateSelectableDates... this.selectableDatesData now: ", this.selectableDatesData)
         },
     },
 };
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 02361128c..03cb4185c 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -1,5 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <!-- <h3>shopTimeSlots: {{ shopTimeSlots }}</h3> -->
         <div class="page-container-grouped-styles">
             <loadingModal ref="loadingModal" />
             <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
@@ -19,7 +20,7 @@
                 </span>
             </div>
             <date-picker
-                selectableDates="custom"
+                selectableDatesSetting="custom"
                 v-model="selectedDate"
                 :customSelectableDatesCallback="getAvailableDates" />
             <funnel-footer
@@ -43,6 +44,8 @@ import datePicker from "@/digital-components/date-picker/date-picker";
 
 // Supporting files
 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 { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 import {
@@ -62,29 +65,77 @@ export default {
         return {
             selectedDate: null,
             mockSelectableDatesData: [
-                { year: 2023, month: 4, date: 13 },
-                { year: 2023, month: 4, date: 14 },
-                { year: 2023, month: 4, date: 26 },
-                { year: 2023, month: 5, date: 4 },
-                { year: 2023, month: 5, date: 5 },
-                { year: 2023, month: 5, date: 14 },
-                { year: 2023, month: 5, date: 21 },
-                { year: 2023, month: 5, date: 23 },
-                { year: 2023, month: 5, date: 25 },
-                { year: 2023, month: 6, date: 11 },
+                { dateString: "2023-04-28", year: 2023, month: 4, date: 28 },
+                { dateString: "2023-05-04", year: 2023, month: 5, date: 4 },
+                { dateString: "2023-05-05", year: 2023, month: 5, date: 5 },
+                { dateString: "2023-05-14", year: 2023, month: 5, date: 14 },
+                { dateString: "2023-05-21", year: 2023, month: 5, date: 21 },
+                { dateString: "2023-05-23", year: 2023, month: 5, date: 23 },
+                { dateString: "2023-05-25", year: 2023, month: 5, date: 25 },
+                { dateString: "2023-06-11", year: 2023, month: 6, date: 11 },
+                { dateString: "2023-06-13", year: 2023, month: 6, date: 13 },
+                { dateString: "2023-06-17", year: 2023, month: 6, date: 17 },
             ],
+            selectableDatesData: [],
         };
+        /*
+        shopTimeSlots: { 
+            estimatedServiceMinutesMinimum: 120, 
+            estimatedServiceMinutesMaximum: 180, 
+            days: [ 
+                {
+                    date: "2023-04-25", 
+                    timeSlots: [ 
+                        { 
+                            id: 12001400, 
+                            startTime: "12:00:00Z", 
+                            endTime: "14:00:00Z", 
+                            offerPremium: false,
+                        }, 
+                    ], 
+                }, 
+                { 
+                    date: "2023-04-26", 
+                    timeSlots: [
+                        { id: 12001400, 
+                            startTime: "12:00:00Z", 
+                            endTime: "14:00:00Z", 
+                            offerPremium: false, 
+                        },
+                        { id: 12001400, 
+                            startTime: "14:30:00Z", 
+                            endTime: "17:30:00Z", 
+                            offerPremium: false, 
+                        }
+                    ], 
+                },
+            ],
+        }
+        */
     },
     async beforeRouteEnter(to, from, next) {
         // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
 
+        const getShopTimeSlotsPromise = baseMixin.methods.dispatchStoreAction(
+            storeActions.GET_SHOP_TIME_SLOTS,
+            {
+                startDate: "2023-01-01",
+                endDate: "2023-05-01",
+                shopAppointmentType: "ZZZZ",
+            }
+        );
+
         // Settle promises and get results
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
                 promise: cmsContentPromise,
             },
+            {
+                resultKey: "shopTimeSlots",
+                promise: getShopTimeSlotsPromise,
+            },
         ];
 
         const resultMap = await settleAllPromises(promiseResultMap);
@@ -92,6 +143,7 @@ export default {
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
+            vm.shopTimeSlots = resultMap.shopTimeSlots;
         });
     },
     computed: {
@@ -112,8 +164,43 @@ export default {
             return true;
             // NEED TODO - WHAT ARE PAGE REQ'S FOR THIS PAGE?
         },
-        getAvailableDates(startDate, endDate) {
-            return this.mockSelectableDatesData;
+        async getAvailableDates(startDate, endDate) {
+            // console.log("S- async getAvailableDates");
+
+            // USING DATES PASSED, MAKE AN API CALL
+            const newShopTimeSlotsResponse = await baseMixin.methods.dispatchStoreAction(
+                storeActions.GET_SHOP_TIME_SLOTS,
+                {
+                    startDate: startDate,
+                    endDate: endDate,
+                    shopAppointmentType: "ZZZZ",
+                },
+                false
+            );
+            const newShopTimeSlots = newShopTimeSlotsResponse.data;
+            // console.log("newShopTimeSlots ", newShopTimeSlots)
+
+            // ADD API CALL RESULTS TO EXISTING DATE DATA
+            const currentData = [
+                ...this.selectableDatesData,
+                this.convertApiResponse(newShopTimeSlots.days),
+            ];
+
+            // RETURN ALL THE DATE DATA (THE AGGREGATE)
+            return this.mockSelectableDatesData; // TODO REMOVE MOCK DATA
+            // return currentData;
+        },
+        convertApiResponse(responseData) {
+            // DATA CONVERSION
+            responseData?.forEach((date) => {
+                const dateString = date.date;
+                date.dateString = dateString;
+                const dateStringPieces = dateString.split("-");
+                date.year = Number(dateStringPieces[0]);
+                date.month = Number(dateStringPieces[1]);
+                date.date = Number(dateStringPieces[2]);
+            });
+            return responseData;
         },
         backButtonAction() {
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
diff --git a/src/store/index.js b/src/store/index.js
index 6da7550a2..e9d872db0 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -993,6 +993,41 @@ export const actions = {
         });
     },
 
+    getShopTimeSlots(
+        context,
+        { startDate = "2023-01-01", endDate = "2023-05-01", shopAppointmentType = "" }
+    ) {
+        const order = context.state.order;
+        const mockArray = [];
+
+        var payload = {
+            providerNumber: order.providerNumber,
+            startDate: startDate,
+            endDate: endDate,
+            shopAppointmentType: shopAppointmentType,
+            applicationName: applicationConfig.APPLICATION_NAME,
+            parentAccountNumber: context.getters.payment.parentAccountNumber,
+            carId: context.getters.vehicle.carId,
+            partNumbers: mockArray, // TODO: WHERE DO I GET THIS?
+            eon: order.eon,
+            provisionalReasons: mockArray, // TODO: WHERE DO I GET THIS?
+        };
+
+        // TODO: REMOVE MOCK CALL & USE REAL CALL BELOW
+        return globalMethods.callMockHttpClient({
+            method: endpoints.GetShopTimeSlots.method,
+            endpoint: endpoints.GetShopTimeSlots.mockUrl,
+            payload: payload,
+        });
+        // TODO: RESTORE THIS
+        // return globalMethods.callHttpClient({
+        //     method: endpoints.GetShopTimeSlots.method,
+        //     endpoint: endpoints.GetShopTimeSlots.url,
+        //     payload: payload,
+        //     logApiCall: false,
+        // });
+    },
+
     // Session API Actions
     saveSession(context) {
         const vehicle = context.getters.vehicle;