From 6deeee08128d6e3dae016b3c9f6b9792527edd48 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Tue, 7 Feb 2023 07:39:44 +0100
Subject: [PATCH] Replace the datepicker of the booking page

---
 application/views/layouts/booking_layout.php |  2 +
 application/views/pages/booking.php          |  1 +
 assets/js/pages/booking.js                   | 78 ++++----------------
 3 files changed, 19 insertions(+), 62 deletions(-)

diff --git a/application/views/layouts/booking_layout.php b/application/views/layouts/booking_layout.php
index 33995197..0a532796 100644
--- a/application/views/layouts/booking_layout.php
+++ b/application/views/layouts/booking_layout.php
@@ -15,6 +15,7 @@
     
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/jquery-ui-dist/jquery-ui.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/cookieconsent/cookieconsent.min.css') ?>">
+    <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/themes/' . vars('theme')  . '.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/general.css') ?>">
     <link rel="stylesheet" type="text/css" href="<?= asset_url('assets/css/layouts/booking_layout.css') ?>">
@@ -61,6 +62,7 @@
 <script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/fontawesome.min.js') ?>"></script>
 <script src="<?= asset_url('assets/vendor/@fortawesome-fontawesome-free/solid.min.js') ?>"></script>
 <script src="<?= asset_url('assets/vendor/tippy.js/tippy-bundle.umd.min.js') ?>"></script>
+<script src="<?= asset_url('assets/vendor/flatpickr/flatpickr.min.js') ?>"></script>
 
 <script src="<?= asset_url('assets/js/app.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
diff --git a/application/views/pages/booking.php b/application/views/pages/booking.php
index 3e85134f..b0c7a361 100755
--- a/application/views/pages/booking.php
+++ b/application/views/pages/booking.php
@@ -56,6 +56,7 @@
 <script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
 <script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
 <script src="<?= asset_url('assets/js/http/booking_http_client.js') ?>"></script>
 <script src="<?= asset_url('assets/js/pages/booking.js') ?>"></script>
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index 1af897cb..38ba81b0 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -80,75 +80,29 @@ App.Pages.Booking = (function () {
         // Initialize page's components (tooltips, datepickers etc).
         tippy('[data-tippy-content]');
 
-        const weekdayId = App.Utils.Date.getWeekdayId(vars('first_weekday'));
-
-        $selectDate.datepicker({
-            dateFormat: 'dd-mm-yy',
-            firstDay: weekdayId,
-            minDate: 0,
-            defaultDate: moment().toDate(),
-
-            dayNames: [
-                lang('sunday'),
-                lang('monday'),
-                lang('tuesday'),
-                lang('wednesday'),
-                lang('thursday'),
-                lang('friday'),
-                lang('saturday')
-            ],
-            dayNamesShort: [
-                lang('sunday').substr(0, 3),
-                lang('monday').substr(0, 3),
-                lang('tuesday').substr(0, 3),
-                lang('wednesday').substr(0, 3),
-                lang('thursday').substr(0, 3),
-                lang('friday').substr(0, 3),
-                lang('saturday').substr(0, 3)
-            ],
-            dayNamesMin: [
-                lang('sunday').substr(0, 2),
-                lang('monday').substr(0, 2),
-                lang('tuesday').substr(0, 2),
-                lang('wednesday').substr(0, 2),
-                lang('thursday').substr(0, 2),
-                lang('friday').substr(0, 2),
-                lang('saturday').substr(0, 2)
-            ],
-            monthNames: [
-                lang('january'),
-                lang('february'),
-                lang('march'),
-                lang('april'),
-                lang('may'),
-                lang('june'),
-                lang('july'),
-                lang('august'),
-                lang('september'),
-                lang('october'),
-                lang('november'),
-                lang('december')
-            ],
-            prevText: lang('previous'),
-            nextText: lang('next'),
-            currentText: lang('now'),
-            closeText: lang('close'),
-
-            onSelect: () => {
-                App.Http.Booking.getAvailableHours(moment($selectDate[0]._flatpickr.selectedDates[0]).format('YYYY-MM-DD'));
+        App.Utils.UI.initializeDatepicker($selectDate, {
+            inline: true,
+            onChange: (selectedDates) => {
+                App.Http.Booking.getAvailableHours(moment(selectedDates[0]).format('YYYY-MM-DD'));
                 updateConfirmFrame();
             },
 
-            onChangeMonthYear: (year, month) => {
-                const currentDate = new Date(year, month - 1, 1);
-
+            onMonthChange: (selectedDates) => {
                 App.Http.Booking.getUnavailableDates(
                     $selectProvider.val(),
                     $selectService.val(),
-                    moment(currentDate).format('YYYY-MM-DD')
+                    moment(selectedDates[0]).format('YYYY-MM-DD')
                 );
-            }
-        });
+            },
+
+            onYearChange: (selectedDates) => {
+                App.Http.Booking.getUnavailableDates(
+                    $selectProvider.val(),
+                    $selectService.val(),
+                    moment(selectedDates[0]).format('YYYY-MM-DD')
+                );
+            },
+        }); 
 
         const browserTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
         const isTimezoneSupported = $selectTimezone.find(`option[value="${browserTimezone}"]`).length > 0;