Add logic for navigating back to the previously available date

alextselegidis · Feb 18, 2024 · 609dc93 · 609dc93
1 parent 6fecbc7
commit 609dc93
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/assets/js/http/booking_http_client.js b/assets/js/http/booking_http_client.js
@@ -233,8 +233,9 @@ App.Http.Booking = (function () {
      * @param {Number} providerId The selected provider ID.
      * @param {Number} serviceId The selected service ID.
      * @param {String} selectedDateString Y-m-d value of the selected date.
+     * @param {Number} monthChangeStep Whether to add or subtract months.
      */
-    function getUnavailableDates(providerId, serviceId, selectedDateString) {
+    function getUnavailableDates(providerId, serviceId, selectedDateString, monthChangeStep) {
         if (processingUnavailableDates) {
             return;
         }
@@ -275,7 +276,7 @@ App.Http.Booking = (function () {
                     const unavailableDates = [];
                     while (startOfMonthMoment.isSameOrBefore(endOfMonthMoment)) {
                         unavailableDates.push(startOfMonthMoment.format('YYYY-MM-DD'));
-                        startOfMonthMoment.add(1, 'days'); // Move to the next day
+                        startOfMonthMoment.add(monthChangeStep, 'days'); // Move to the next day
                     }
                     applyUnavailableDates(unavailableDates, searchedMonthStart, false);
                     searchedMonthStart = undefined;
@@ -287,7 +288,7 @@ App.Http.Booking = (function () {
                 const selectedDateMoment = moment(selectedDateString);
                 selectedDateMoment.add(1, 'month');
                 const nextSelectedDate = selectedDateMoment.format('YYYY-MM-DD');
-                getUnavailableDates(providerId, serviceId, nextSelectedDate);
+                getUnavailableDates(providerId, serviceId, nextSelectedDate, monthChangeStep);
                 return;
             }
 

diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
@@ -49,6 +49,18 @@ App.Pages.Booking = (function () {
      */
     let manageMode = vars('manage_mode') || false;
 
+    /**
+     * Detect the month step.
+     *
+     * @param previousDateTimeMoment
+     * @param nextDateTimeMoment
+     *
+     * @returns {Number}
+     */
+    function detectDatepickerMonthChangeStep(previousDateTimeMoment, nextDateTimeMoment) {
+        return previousDateTimeMoment.isAfter(nextDateTimeMoment) ? -1 : 1;
+    }
+
     /**
      * Initialize the module.
      */
@@ -104,34 +116,44 @@ App.Pages.Booking = (function () {
                 }
 
                 monthTimeout = setTimeout(() => {
+                    const previousMoment = moment(instance.selectedDates[0]);
+
                     const displayedMonthMoment = moment(
                         instance.currentYearElement.value +
                             '-' +
                             String(Number(instance.monthsDropdownContainer.value) + 1).padStart(2, '0') +
                             '-01',
                     );
 
+                    const monthChangeStep = detectDatepickerMonthChangeStep(previousMoment, displayedMonthMoment);
+
                     App.Http.Booking.getUnavailableDates(
                         $selectProvider.val(),
                         $selectService.val(),
                         displayedMonthMoment.format('YYYY-MM-DD'),
+                        monthChangeStep,
                     );
                 }, 500);
             },
 
             onYearChange: (selectedDates, dateStr, instance) => {
                 setTimeout(() => {
+                    const previousMoment = moment(instance.selectedDates[0]);
+
                     const displayedMonthMoment = moment(
                         instance.currentYearElement.value +
                             '-' +
                             (Number(instance.monthsDropdownContainer.value) + 1) +
                             '-01',
                     );
 
+                    const monthChangeStep = detectDatepickerMonthChangeStep(previousMoment, displayedMonthMoment);
+
                     App.Http.Booking.getUnavailableDates(
                         $selectProvider.val(),
                         $selectService.val(),
                         displayedMonthMoment.format('YYYY-MM-DD'),
+                        monthChangeStep,
                     );
                 }, 500);
             },