CASH-1790 updates for date-picker

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

@@ -1,17 +1,18 @@
 <template>
     <div
         class="date-picker text-center"
-        :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass}`">
+        :class="`${calendarViewDirection} calendar-2025 ${showPricingByDayClass} ${loadingStatus === 'reinitial' ? 'loading-reinitial' : ''}`">
         <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
             <legend class="sr-only">Select a day and time</legend>
             <div
-                v-for="month in months"
+                v-for="(month, i) in months"
                 :key="`${month.monthLabel}-${month.yearNum?.toString()}`"
                 :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
-                class="calendar-grid-container"
+                class="calendar-grid-container month"
                 :class="[
                     hideSomeDaysForInitialView ? 'partial-month-initial-view' : '',
                     month.monthClass,
+                    i === 0 ? 'first-month-shown' : '',
                 ]">
                 <div class="month-year body-small d-flex align-items-center">
                     {{ month.monthLabel }} {{ month.yearNum?.toString() }}
@@ -114,7 +115,8 @@
                 </div>
             </div>
             <loader
-                :class="[!isLoading ? 'date-picker-hidden' : '']"
+                class="date-picker-loader"
+                :class="[loadingStatus !== 'none' ? 'show-loader' : '']"
                 loaderColor="blue"
                 loaderPosition="center" />
             <div class="row form-test-error" id="date-of-month-error">
@@ -125,7 +127,7 @@
                 type="button"
                 class="btn btn-link view-more-dates"
                 id="viewMoreDates"
-                :disabled="isLoading"
+                :disabled="loadingStatus !== 'none'"
                 @click="showAnotherMonth">
                 View more dates
             </button>
@@ -200,6 +202,10 @@ export default {
         pricingByDayUpcharge: Number,
         isPricingByDayExperiment: Boolean,
         isMobileSelected: Boolean,
+        loadingStatus: {
+            type: String,
+            default: "none",
+        },
     },
     setup(props) {
         const uuid = uuidv4();
@@ -489,7 +495,6 @@ export default {
             });
         },
         async setCalendarData(config = {}) {
-            this.isLoading = true;
             this.selectableDatesInshop = [];
             this.selectableDatesMobile = [];
             this.months = [];
@@ -541,7 +546,6 @@ export default {
                 // }
             }
             this.months = months;
-            this.isLoading = false;
 
             if (config.preSelectedDate) {
                 this.$nextTick(() => {
@@ -729,7 +733,6 @@ export default {
         },
         async showAnotherMonth() {
             if (!this.months) return;
-            this.isLoading = true;
             let monthToShow;
             let monthStartDate;
 
@@ -774,7 +777,6 @@ export default {
                     monthToShowDates[monthToShowDates.length - 1].inputValue
                 );
 
-                this.isLoading = false;
                 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);
@@ -787,7 +789,6 @@ export default {
         },
         async updateSelectableDates(monthStart, monthEnd) {
             const moreSelectableDates = await this.getMoreDatesCallback(monthStart, monthEnd);
-
             moreSelectableDates.inshopTimeSlotsData.days.forEach((selectableDate) => {
                 const index = this.selectableDatesInshop.findIndex(
                     (dateObj) => dateObj.date === selectableDate.date
@@ -846,12 +847,6 @@ export default {
         },
     },
     watch: {
-        isLoading(newValue) {
-            // if done loading dates, then set to first available date
-            if (newValue === false && this.firstAvailableSelectableDate) {
-                this.selectedDate = this.firstAvailableSelectableDate;
-            }
-        },
         modelValue(newValue) {
             this.resetField({
                 value: newValue,
@@ -872,9 +867,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.date-picker-hidden {
+.date-picker-loader {
     opacity: 0;
     max-height: 0;
+
+    &.show-loader {
+        opacity: 1;
+        max-height: none;
+    }
 }
 .date-picker {
     position: relative;
@@ -903,12 +903,12 @@ export default {
             height: 1.5rem;
         }
     }
-    .calendar-grid-container {
+    .month {
         margin: 0 auto 1rem auto;
         position: relative;
         transition:
-            height ease 2s,
+            height ease 1s,
-            opacity ease 2s;
+            max-height ease 1s;
         display: grid;
         grid-template-columns: repeat(7, 1fr);
         justify-content: center;
@@ -1157,7 +1157,7 @@ export default {
     }
 
     .past {
-        .calendar-grid-container {
+        .month {
             .month-year {
                 grid-area: 1 / 1 / 2 / 6;
             }
@@ -1214,7 +1214,7 @@ export default {
     }
     // new calendar styling overrides
     &.calendar-2025 {
-        .calendar-grid-container .grid-item {
+        .month .grid-item {
             margin: 0 0 0.15rem 0;
         }
         .month-year {
@@ -1316,6 +1316,33 @@ export default {
                 }
             }
         }
+
+        &.loading-reinitial {
+            .month {
+                opacity: 0;
+                max-height: 0;
+            }
+            .month.first-month-shown {
+                opacity: 1;
+                max-height: none;
+
+                .grid-item.radio-wrapper.selectable-day {
+                    input[type="radio"]:checked + label,
+                    label {
+                        background-color: $white;
+                        border: none;
+                        color: initial;
+                        cursor: none;
+                        &:hover {
+                            border: none;
+                        }
+                        span {
+                            font-family: UrbanistRegular;
+                        }
+                    }
+                }
+            }
+        }
     }
     :deep(.timeslots .button-inner-wrapper) {
         display: flex;