From 603be6d206187d78bb1103069d3d12006ef87ee0 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 25 Apr 2023 00:17:30 -0400
Subject: [PATCH] merge develop

---
 .../button-question/button-question.vue       |  18 +-
 .../date-picker/date-picker.vue               | 598 ++++++++++++++----
 src/global-methods.js                         |  16 +-
 src/layouts/schedule/schedule.vue             |  68 +-
 4 files changed, 535 insertions(+), 165 deletions(-)

diff --git a/src/digital-components/button-question/button-question.vue b/src/digital-components/button-question/button-question.vue
index ec7b165a0..5d8db68d4 100644
--- a/src/digital-components/button-question/button-question.vue
+++ b/src/digital-components/button-question/button-question.vue
@@ -265,16 +265,16 @@ export default {
 </script>
 
 <style lang="scss">
-.button-question-overflow {
-    height: calc(100vh - 274px);
+// .button-question-overflow {
+//     height: calc(100vh - 274px);
 
-    .overflow-scroll {
-        // Height will be determined by overall height of content above list
-        height: calc(100% - 314px);
-        overflow-x: hidden !important;
-        -webkit-overflow-scrolling: touch;
-    }
-}
+//     .overflow-scroll {
+//         // Height will be determined by overall height of content above list
+//         height: calc(100% - 314px);
+//         overflow-x: hidden !important;
+//         -webkit-overflow-scrolling: touch;
+//     }
+// }
 .button-question {
     color: $black;
 
diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index 7b8d1ea7b..25819761a 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -1,69 +1,70 @@
 <template>
-    <div class="date-picker text-center" :class="calendarViewDirection">
-        <!-- <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()}`"
-                :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
-                    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>
-            </div>
-        </fieldset>
-        <button
-            v-if="calendarViewDirection === 'future'"
-            type="button"
-            class="btn btn-link"
-            @click="goForward">
-            View more dates
-        </button>
-    </div>
+        <div v-if="months" class="date-picker text-center" :class="calendarViewDirection">
+            <!-- <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 id="date-picker-fieldset" ref="datePickerFieldset">
+                <legend class="sr-only">Date Picker</legend>
+                <!-- <h4 id="tracker" ref="tracker">currentScrollTop: {{ currentScrollTop }}</h4> -->
+                    <div
+                        v-for="month in months"
+                        :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
+                            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>
+                    </div>
+                <!-- <div id="bottom-spacer"></div> -->
+            </fieldset>
+            <button
+                v-if="calendarViewDirection === 'future'"
+                type="button"
+                class="btn btn-link"
+                @click="goForward">
+                View more dates
+            </button>
+        </div>
 </template>
 
 <script>
@@ -81,7 +82,7 @@ export default {
         return {
             // calendarData: [],
             monthsBeforeToLoadOffset: 0,
-            monthsAfterToLoadOffset: 1,
+            monthsAfterToLoadOffset: 12,
             selectableDatesData: [], // NOTE: uses monthNum (1-based), NOT monthIndex (0-based)
             isInitialView: true,
             initialViewRowsToShow: 5,
@@ -97,7 +98,9 @@ export default {
 
     mounted() {
         this.setCalendarData();
-        // this.trackScrollTop();
+        // this.$nextTick(() => {
+            this.trackScrollTop();
+        // });
     },
 
     props: {
@@ -111,6 +114,9 @@ export default {
         modelValue: {
             type: Object,
         },
+        // selectableDates: {
+        //     type: Array,
+        // },
         todayOverrideDateString: {
             // only used for unit tests to override today's date
             type: String,
@@ -157,12 +163,250 @@ export default {
         //         this.setCalendarData();
         //     }
         //     // this.months = this.calendarData;
+        // },
+        trackScrollTop() {
+
+            // this.$nextTick(() => {
+            //     setTimeout(() => {
+            //         // const outputSlot = document.querySelector("#tracker");
+            //         // const fieldset = document.querySelector("#date-picker-fieldset");
+            //         // console.log("fieldset: ", fieldset)
+
+                    setInterval(() => {
+                        this.currentScrollTop = this.$refs.datePickerFieldset?.scrollTop.toString();
+                    }, 250);
+            //     }, 500);
+            // });
+            
+            
+        },
+        scrollToElement(elementId, speed, easing) {
+            const TIMINGFUNC_MAP = {
+                "linear": t => t,
+                "ease-in": t => t * t,
+                "ease-out": t => t * ( 2 - t ),
+                "ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
+            };
+            const BUFFER_OFFSET = 10;
+            function scrollTopSmooth( wrapper, target, duration = 300, timingName = "linear" ) { 
+                const initY = wrapper.scrollTop;
+                const wrapperRect = wrapper.getBoundingClientRect();
+                // console.log("wrapperRect: ", wrapperRect)
+                const targetRect = target.getBoundingClientRect();
+                // console.log("targetRect: ", targetRect)
+                const targetY = targetRect.top - wrapperRect.top - BUFFER_OFFSET;
+                // console.log("targetY: ", targetY)
+
+
+                const timingFunc = TIMINGFUNC_MAP[ timingName ];
+
+                let start = null;
+
+                const step = ( timestamp ) => {
+                    start = start || timestamp;
+                    const progress = timestamp - start,
+                        // Growing from 0 to 1
+                        time = Math.min( 1, ( ( timestamp - start ) / duration ) );
+
+                    let percentageNew = timingFunc( time );
+                    let distanceToGo = targetY; // 592 is the goal for June-2023 targetY
+                    let thisDistance = percentageNew * distanceToGo;
+
+                    // console.log("", progress.toFixed(2), " - initY: ", initY.toFixed(2))
+                    // console.log("     ", progress.toFixed(2), " - percentageNew: ", percentageNew.toFixed(2))
+                    // console.log("          ", progress.toFixed(2), " - distanceToGo: ", distanceToGo.toFixed(2))
+                    // console.log("               ", progress.toFixed(2), " - thisDistance: ", thisDistance.toFixed(2))
+                    // console.log(" ")
+
+                    wrapper.scrollTo( 0, initY + thisDistance );
+
+
+                    if ( percentageNew < 1 ) {
+                        window.requestAnimationFrame( step );
+                    }
+                };
+
+                window.requestAnimationFrame( step );  
+            }
+
+            // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
+
+            // const wrapper = document.getElementById("date-picker-fieldset");
+            const wrapper = this.$refs.datePickerFieldset;
+            // console.log("wrapper.scrollTop: ", wrapper.scrollTop)
+            // get Target
+            let targetMonth = document.getElementById(elementId);
+
+            scrollTopSmooth( wrapper, targetMonth, 800, "ease-in-out" );
+
+        },
+        // scrollToElementOLD(elementId, speed, easing) {
+        //     const wrapper = document.getElementById("date-picker-fieldset");
+        //     const element = document.getElementById(elementId);
+        //     const elementRect = element.getBoundingClientRect();
+        //     const wrapperRect = wrapper.getBoundingClientRect();
+        //     const offset = elementRect.top - (wrapperRect.top + 200);
+        //     const distance = Math.abs(offset);
+        //     const duration = distance / speed;
+        //     const easingFactor = easing || 1;
+        //     const easingFunction = (t) => Math.pow(t, easingFactor);
+
+        //     // console.log("elementRect: ", elementRect);
+        //     // console.log("wrapperRect: ", wrapperRect);
+        //     // console.log("offset: ", offset);
+        //     // console.log("distance: ", distance);
+        //     // console.log("duration: ", duration);
+
+        //     let start = null;
+
+        //     function step(timestamp) {
+        //         if (!start) start = timestamp;
+        //         const progress = timestamp - start;
+        //         const prePercentage = progress / duration;
+        //         // console.log("progress / duration: ", prePercentage);
+        //         const percentage = Math.min(progress / duration, 1);
+        //         const distanceToMove = easingFunction(percentage) * distance;
+        //         // console.log(
+        //         //     "progress / percentage / distanceToMove: ",
+        //         //     progress,
+        //         //     " / ",
+        //         //     percentage,
+        //         //     " / ",
+        //         //     distanceToMove
+        //         // );
+        //         // debugger; // eslint-disable-line no-debugger
+        //         wrapper.scrollTop += offset > 0 ? distanceToMove : -distanceToMove;
+        //         if (percentage < 1) {
+        //             setTimeout(() => {
+        //                 window.requestAnimationFrame(step);
+        //             }, 50); // slowing it down a bit, less calculations, less smooth
+        //             // window.requestAnimationFrame(step);
+        //         }
+        //     }
+
+        //     window.requestAnimationFrame(step);
+
+        //     const elementRectEnd = element.getBoundingClientRect();
+        //     const wrapperRectEnd = wrapper.getBoundingClientRect();
+
+        //     // console.log("elementRectEnd: ", elementRectEnd);
+        //     // console.log("wrapperRectEnd: ", wrapperRectEnd);
+        // },
+        // scrollToElementOLD2(elementId, speed, easing) {
+        //     const TIMINGFUNC_MAP = {
+        //         "linear": t => t,
+        //         "ease-in": t => t * t,
+        //         "ease-out": t => t * ( 2 - t ),
+        //         "ease-in-out": t => ( t < .5 ? 2 * t * t : -1 + ( 4 - 2 * t ) * t )
+        //     };
+        //     function scrollTopSmooth( el, duration = 300, timingName = "linear" ) { 
+        //         const initY = el.scrollTop;
+        //         const timingFunc = TIMINGFUNC_MAP[ timingName ];
+        //         let start = null;
+
+        //         const step = ( timestamp ) => {
+        //             start = start || timestamp;
+        //             const progress = timestamp - start,
+        //                 // Growing from 0 to 1
+        //                 time = Math.min( 1, ( ( timestamp - start ) / duration ) );
+
+        //             console.log(" ", progress.toFixed(2), " - initY: ", initY.toFixed(2))
+        //             console.log("    ", progress.toFixed(2), " - calc1: ", ( timingFunc( time ) ).toFixed(2))
+        //             console.log("       ", progress.toFixed(2), " - calc2: ", ( timingFunc( time ) * initY ).toFixed(2))
+        //             console.log("          ", progress.toFixed(2), " - scrollTo: ", (initY + ( timingFunc( time ) * initY )).toFixed(2))
+        //             console.log(" ")
+
+        //             el.scrollTo( 0, initY - ( timingFunc( time ) * initY ) );
+
+        //             if ( progress < duration ) {
+        //                 window.requestAnimationFrame( step );
+        //             }
+        //         };
+
+        //         window.requestAnimationFrame( step );  
+        //     }
+
+        //     // scrollTopSmooth( window.scrollY, 300, "ease-in-out" );
+
+        //     // const wrapper = document.getElementById("date-picker-fieldset");
+        //     const wrapper = this.$refs.datePickerFieldset;
+        //     console.log("wrapper.scrollTop: ", wrapper.scrollTop)
+        //     scrollTopSmooth( wrapper, 300, "ease-in-out" );
+        //     // go from: 211 to 592
+
+        //     // function scrollTest() {
+        //     //     wrapper.scrollTo( 0, (wrapper.scrollTop + 20) )
+        //     //     setTimeout(() => {
+        //     //         if (wrapper.scrollTop < 592) {
+        //     //             scrollTest();
+        //     //         }
+        //     //     }, 100);
+        //     // }
+        //     // scrollTest();
+
         // },
         goForward() {
+            const fieldset = document.querySelector("#date-picker-fieldset");
+
             if (this.isInitialView) {
+
+                const monthToScrollTo = document.querySelector(".initial-view:not(.current-month):not(.month-hidden)");
+                // console.log(" monthToScrollTo.id ", monthToScrollTo.id)
+
+                this.$nextTick(() => {
+                    setTimeout(() => {
+                        // document.querySelector("#April-2023")?.scrollIntoView({ behavior: "smooth" });
+
+                        // const targ = document.querySelector("#April-2023").getBoundingClientRect();
+                        // const fs = document.querySelector("fieldset");
+                        // // targ.top is number to scroll to
+                        // fs.scrollBy({
+                        //     top: 100,
+                        //     behavior: "smooth",
+                        // });
+                        // write a javascript function that will get the y value of element firstThing and slowly scroll it in the parent element Wrapper so the top of firstThing is at the top of the Wrapper. Allow a parameter to control speed of the scrolling movement.
+
+                        this.scrollToElement(monthToScrollTo.id);
+                        // fieldset.scrollTop = 211;
+                    }, 0.01);
+                });
                 this.isInitialView = false; // 1st click removes hidden styling
+                
             } else {
-                this.addMonthData(); // 2nd click adds 1 month data
+                // ====== GET CURRENT COORDINATES ==========
+
+                // fieldset.classList.add("crazy");
+
+                // this.savedHeight = fieldset.scrollTop;
+                // console.log("this.savedHeight is: ", this.savedHeight);
+                // =================================
+
+                this.showAnotherMonth(); // 2nd click adds 1 month data
+
+                // ====== RESTORE COORDINATES ==========
+
+                // this.$nextTick(() => {
+                //     // console.log("AFTER 1 fieldset.scrollTop: ", fieldset.scrollTop);
+                //     fieldset.scrollTop = this.savedHeight;
+                //     fieldset.classList.remove("crazy");
+                //     console.log(" BEFORE ANIMATION, this.savedHeight is: ", this.savedHeight)
+                //     console.log(" BEFORE ANIMATION, fieldset.scrollTop is: ", fieldset.scrollTop)
+                //     this.scrollToElement(this.newestMonthId, 0.5, 2);
+                // });
+
+                
+                // debugger; // eslint-disable-line no-debugger
+                //  this.$nextTick(() => {
+                //     this.scrollToElement(this.newestMonthId, 0.5, 0.5);
+                // });
+
+                // this.$nextTick(() => {
+                //     setTimeout(() => {
+                //         this.scrollToElement(this.newestMonthId, 0.1, 2);
+                //     }, 500);
+                // });
+
+                // =================================
             }
         },
         async setCalendarData() {
@@ -221,6 +465,7 @@ export default {
                     }
                 }
             } else {
+                // TODO ? I THINK THIS IS NEVER USED NOW
                 // used only when adding an additional month
 
                 if (direction === "future") {
@@ -250,29 +495,32 @@ export default {
             }
 
             const todayDayIndex = this.todayDate.getDay(); // get day of week index of today (0-6)
-            currentWeekStartDateNum =
-                todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
+            currentWeekStartDateNum = todayDayIndex > todayDateNum ? 1 : todayDateNum - todayDayIndex; // FUTURE
             const monthEndDate = new Date(yearNum, monthIndex + 1, 0); // BOTH
             let monthEndDateNum = monthEndDate.getDate(); // BOTH
             currentWeekEndDateNum = todayDateNum + 6 - todayDayIndex; // PAST, aka Sat. (ok if it's larger than the month end?)
-            if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum)
+            if (offset === 0 && direction === "past" && monthEndDateNum > currentWeekEndDateNum) {
                 monthEndDateNum = currentWeekEndDateNum; // PAST
-            const monthStartDateNum =
-                offset === 0 && direction === "future" ? currentWeekStartDateNum : 1; // FUTURE
+            }
+            const monthStartDateNum = (offset === 0 && direction === "future") ? currentWeekStartDateNum : 1; // FUTURE
             const monthStartDate = new Date(yearNum, monthIndex, monthStartDateNum); // BOTH
             const startDateDayIndex = monthStartDate.getDay(); // FUTURE
             const endDateDayIndex = monthEndDate.getDay(); // PAST
 
             if (typeof offset !== "undefined") {
-                if (offset === 0 && direction === "future")
+                if (offset === 0 && direction === "future") {
                     firstMonthDayTally = monthStartDateNum - startDateDayIndex; // FUTURE (starts low, counts up)
-                if (offset === 0 && direction === "past")
+                    monthClass = monthClass + " current-month";
+                }
+                if (offset === 0 && direction === "past") {
                     firstMonthDayTally = currentWeekEndDateNum; // PAST (starts high, counts down)
+                    monthClass = monthClass + " current-month";
+                }
 
                 while (
                     direction === "future" &&
                     offset === 0 &&
-                    firstMonthDayTally < monthEndDateNum
+                    firstMonthDayTally <= monthEndDateNum
                 ) {
                     // FUTURE
                     firstMonthDayTally = firstMonthDayTally + 7;
@@ -282,7 +530,7 @@ export default {
                 while (
                     direction === "past" &&
                     offset === 0 &&
-                    firstMonthDayTally > monthStartDateNum
+                    firstMonthDayTally >= monthStartDateNum
                 ) {
                     // PAST
                     firstMonthDayTally = firstMonthDayTally - 7;
@@ -295,7 +543,7 @@ export default {
                         initialViewStartDate = monthEndDateNum - endDateDayIndex; // PAST
                         this.initialViewRowsTally++;
                     } else {
-                        monthClass = monthClass + " month-hidden";
+                        monthClass = monthClass + " initial-month-hidden";
                     }
 
                     while (this.initialViewRowsTally < this.initialViewRowsToShow) {
@@ -304,7 +552,11 @@ export default {
                         this.initialViewRowsTally++;
                     }
                 }
-            } else {
+                if (Math.abs(offset) > 1) {
+                    monthClass = monthClass + " month-hidden";
+                }
+
+            } else { // TODO REMOVE THIS BLOCK? NO LONGER NEEDED?
                 monthClass = monthClass + " new-month";
             }
 
@@ -377,63 +629,47 @@ export default {
             const monthToAdd = {
                 monthLabel: monthsOfYear[monthIndex],
                 monthIndex: monthIndex,
+                monthString: monthsOfYear[monthIndex] + "-" + yearNum?.toString(),
                 yearNum: yearNum,
                 dates: datesArray,
                 startDateDayIndex: startDateDayIndex,
                 monthClass: monthClass,
             };
 
+            // TODO: CHANGE NAME OF MONTH AND DATE's "___String" to "_____Id"; it's better
+
             // 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;
         },
-        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)
-
+        async showAnotherMonth() {
+            let monthToShow;
             if (this.calendarViewDirection === "future") {
-                let month = this.months[this.months.length - 1];
-                month.monthClass = month.monthClass.replace("new-month", "");
-                this.months.push(monthToAdd);
+                monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
             }
             if (this.calendarViewDirection === "past") {
-                let month = this.months[0];
-                month.monthClass = month.monthClass.replace("new-month", "");
-                this.months.unshift(monthToAdd);
+                // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
+                monthToShow = this.months.find(month => month.monthClass.includes('month-hidden'));
             }
+            
+            // console.log("monthToShow: ", monthToShow)
+
+            // make new API call with this month's start and end dates
+            await this.updateSelectableDates(monthToShow.dates[0].inputValue.dateString, monthToShow.dates[monthToShow.dates.length - 1].inputValue.dateString);
+
+            monthToShow.monthClass = monthToShow.monthClass.replace(" month-hidden", "");
 
-            this.isAddingNewMonth = false;
             // scroll the next question into view
+            this.$nextTick(() => {
+                setTimeout(() => {
+                    // put call to scroll here
+                    // ID to scroll to:   monthToShow.monthString
+                    this.scrollToElement(monthToShow.monthString);
+                }, 0.01);
+            });
 
-            // == 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) => {
@@ -483,28 +719,94 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.hidden-for-real {
+    visibility: hidden !important;
+    max-height: 0 !important;
+}
+#tracker {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 99999999999;
+    background: rgba(255, 255, 255, 0.6);
+    font-size: 12px;
+    font-weight: bold;
+    width: 40%;
+    text-align: left;
+    padding: 5px;
+
+    // display: none;
+}
+
 .date-picker {
+    // == ATTEMPT 3
+    overflow: hidden;
+    max-height: 62vh; // max-height: 60vh;
     position: relative;
-    display: flex;
-    width: 100%;
-    flex-direction: column;
-    height: 98vh;
+
+    // == ATTEMPT 2
+    // max-height: 60vh; // TBD
+    // overflow-y: auto;
+
+    // == ATTEMPT 1
+    // position: relative;
+    // display: flex;
+    // width: 100%;
+    // flex-direction: column;
+    // height: 98vh;
+
+    // background: 0% 0%/50% 50% url("https://i.imgur.com/hlMp680.png") repeat;
+
+    // == ATTEMPT 2
+    // IS THIS AFTER EVEN NEEDED?
+    //  &:after {
+    //     content: '';
+    //     display: block;
+    //     width: 100%;
+    //     height: 200px;
+    //     background: rgba(155, 60, 125, 0.5);
+    //     position: absolute;
+    //     bottom: 0;
+    //     // background: linear-gradient(to bottom, rgba(125,185,232,0) 0%,rgba(255,255,255,1) 100%);
+
+    // }
+
     fieldset {
-        height: 600px;
-        overflow: auto;
-        position: relative;
+        // == ATTEMPT 3
+        //overflow-y: auto;
+        overflow-y: scroll;
+        height: 54vh; // height: 54vh;
+
+        // height: 9600px; // SB 600px
+
+        // outline: 2px solid red;
+
+        // overflow: auto;
+        // position: relative;
+        // padding-bottom: 1000em;
+
+        // background: 0% 0%/50% 50% url("https://i.imgur.com/MRtUeUs.png") repeat;
+
+        &.crazy {
+            overflow-y: hidden;
+            // outline: 3px dotted orange;
+            // background: orange !important;
+        }
     }
     .calendar-grid-container {
         margin: 0 auto 2rem auto;
         max-width: 414px;
         max-height: 500px;
         overflow: hidden;
-        transition: all ease 1s;
+        // transition: all ease 1s;
+        transition: height ease 2s, opacity ease 2s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
         align-items: center;
-        padding: 0 .75rem;
+        padding: 0 0.75rem;
+
+        // background: url("https://i.imgur.com/ncwmc2l.png") repeat;
 
         .grid-item {
             text-align: center;
@@ -570,6 +872,7 @@ export default {
             height: 2rem;
             opacity: 1;
             transition: ease all 250ms;
+            // transition: ease all 1250ms;
 
             input[type="radio"] {
                 position: absolute; //override bootstrap
@@ -702,12 +1005,13 @@ export default {
         }
 
         &.initial-view {
-            &.month-hidden {
-                display: none;
+            &.initial-month-hidden {
+                visibility: hidden;
+                max-height: 0;
             }
             .day-hidden {
                 opacity: 0;
-                height: 0;
+                // height: 0;
                 overflow: hidden;
                 display: flex;
                 margin: 0;
@@ -715,15 +1019,25 @@ export default {
         }
         &.is-adding-new-month {
             &.new-month {
-                max-height: 0;
+                // max-height: 0;
+                opacity: 0;
             }
         }
+        &.month-hidden {
+            visibility: hidden;
+            max-height: 0;
+        }
+    }
+    #bottom-spacer {
+        height: 20rem;
+        background: lightblue;
     }
 
-    // .btn-link {
-    //     font-weight: 500;
-    //     text-underline-offset: 4px;
-    // }
+    .btn-link {
+        font-weight: 500;
+        text-underline-offset: 4px;
+        box-shadow: none !important; // TODO: FIX THIS
+    }
 
     .past {
         .calendar-grid-container {
@@ -782,18 +1096,26 @@ export default {
         }
     }
     .new-month {
-        max-height: 550px;
+        // max-height: 550px;
+        opacity: 1;
+        // background: lime !important;
     }
 }
 .btn-link {
-    display: flex;
+    // == ATTEMPT 3
+    display: block;
+    position: relative;
+    height: 3rem;
+
+    // display: flex;
     width: 100%;
     justify-content: center;
     background: transparent;
     border: none;
-    position: absolute;
-    bottom: 2rem;
+    // position: absolute;
+    // bottom: 2rem;
     font-weight: 500;
     text-underline-offset: 4px;
+    z-index: 2;
 }
 </style>
diff --git a/src/global-methods.js b/src/global-methods.js
index 2df5c29af..69695a248 100644
--- a/src/global-methods.js
+++ b/src/global-methods.js
@@ -9,18 +9,18 @@ import { headerKeys } from "@/constants/header-keys";
 export default {
     callHttpClient({ method, endpoint, payload, logApiCall = true, isFormData = false }) {
         return new Promise((resolve, reject) => {
-            const cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
-            let payloadAndAnalyticsData = {};
-            if (isFormData) {
-                payloadAndAnalyticsData = payload;
-                payloadAndAnalyticsData.append("AppName", "FixMyGlass");
-            } else {
-                Object.assign(payloadAndAnalyticsData, payload, { AppName: "FixMyGlass" });
-            }
+            let cfDistroUrl = applicationConfig.CONSUMER_CF_DISTRO;
+            const payloadAndAnalyticsData = Object.assign({}, payload, { AppName: "FixMyGlass" });
             const headers = {
                 [headerKeys.EXPERIMENT]: JSON.stringify(store.getters.experimentSettings),
             };
 
+            if (endpoint.toLowerCase().includes("/analytics/")) {
+                cfDistroUrl = "";
+                endpoint = "";
+                method = "GET";
+            }
+
             axios({
                 method: method,
                 url: cfDistroUrl + endpoint,
diff --git a/src/layouts/schedule/schedule.vue b/src/layouts/schedule/schedule.vue
index 03cb4185c..f81d5c0aa 100644
--- a/src/layouts/schedule/schedule.vue
+++ b/src/layouts/schedule/schedule.vue
@@ -65,16 +65,64 @@ export default {
         return {
             selectedDate: null,
             mockSelectableDatesData: [
-                { 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 },
+                { dateString: "2023-04-28" },
+
+                { dateString: "2023-05-04" },
+                { dateString: "2023-05-09" },
+                { dateString: "2023-05-11" },
+                { dateString: "2023-05-17" },
+                { dateString: "2023-05-18" },
+                { dateString: "2023-05-19" },
+                { dateString: "2023-05-23" },
+                { dateString: "2023-05-24" },
+                { dateString: "2023-05-25" },
+                { dateString: "2023-05-30" },
+                { dateString: "2023-05-31" },
+
+                { dateString: "2023-06-01" },
+                { dateString: "2023-06-02" },
+                { dateString: "2023-06-06" },
+                { dateString: "2023-06-07" },
+                { dateString: "2023-06-09" },
+                { dateString: "2023-06-12" },
+                { dateString: "2023-06-13" },
+                { dateString: "2023-06-15" },
+                { dateString: "2023-06-16" },
+                { dateString: "2023-06-17" },
+                { dateString: "2023-06-20" },
+                { dateString: "2023-06-21" },
+                { dateString: "2023-06-22" },
+                { dateString: "2023-06-23" },
+                { dateString: "2023-06-26" },
+                { dateString: "2023-06-27" },
+                { dateString: "2023-06-28" },
+                { dateString: "2023-06-29" },
+                { dateString: "2023-06-30" },
+
+                { dateString: "2023-07-01" },
+                { dateString: "2023-07-03" },
+                { dateString: "2023-07-04" },
+                { dateString: "2023-07-05" },
+                { dateString: "2023-07-06" },
+                { dateString: "2023-07-07" },
+                { dateString: "2023-07-10" },
+                { dateString: "2023-07-11" },
+                { dateString: "2023-07-12" },
+                { dateString: "2023-07-13" },
+                { dateString: "2023-07-14" },
+                { dateString: "2023-07-15" },
+                { dateString: "2023-07-17" },
+                { dateString: "2023-07-18" },
+                { dateString: "2023-07-19" },
+                { dateString: "2023-07-20" },
+                { dateString: "2023-07-21" },
+                { dateString: "2023-07-24" },
+                { dateString: "2023-07-25" },
+                { dateString: "2023-07-26" },
+                { dateString: "2023-07-27" },
+                { dateString: "2023-07-28" },
+                { dateString: "2023-07-29" },
+                { dateString: "2023-07-31" },
             ],
             selectableDatesData: [],
         };