From ae71c4c89d8697ba07fe7456e51f9ae89e21b7c2 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Tue, 24 May 2022 10:47:56 +0200
Subject: [PATCH] Make sure the right provider timezone information is
 displayed in the appointment and unavailability modals

---
 assets/js/components/appointments_modal.js    |  2 ++
 .../js/components/unavailabilities_modal.js   | 24 +++++++++++++++++++
 assets/js/utils/calendar_default_view.js      |  2 ++
 3 files changed, 28 insertions(+)

diff --git a/assets/js/components/appointments_modal.js b/assets/js/components/appointments_modal.js
index 9d7768e7..eda202ab 100755
--- a/assets/js/components/appointments_modal.js
+++ b/assets/js/components/appointments_modal.js
@@ -167,6 +167,8 @@ App.Components.AppointmentsModal = (function () {
             } else {
                 $selectService.find('option:first').prop('selected', true).trigger('change');
             }
+            
+            $selectProvider.trigger('change');
 
             const serviceId = $selectService.val();
 
diff --git a/assets/js/components/unavailabilities_modal.js b/assets/js/components/unavailabilities_modal.js
index 9ac29481..5198416f 100755
--- a/assets/js/components/unavailabilities_modal.js
+++ b/assets/js/components/unavailabilities_modal.js
@@ -28,10 +28,34 @@ App.Components.UnavailabilitiesModal = (function () {
     const $selectFilterItem = $('#select-filter-item');
     const $reloadAppointments = $('#reload-appointments');
 
+    /**
+     * Update the displayed timezone.
+     */
+    function updateTimezone() {
+        const providerId = $selectProvider.val();
+
+        const provider = vars('available_providers').find(
+            (availableProvider) => Number(availableProvider.id) === Number(providerId)
+        );
+
+        if (provider && provider.timezone) {
+            $unavailabilitiesModal.find('.provider-timezone').text(
+                vars('timezones')[provider.timezone]
+            );
+        }
+    }
+
     /**
      * Add the component event listeners.
      */
     function addEventListeners() {
+        /**
+         * Event: Provider "Change"
+         */
+        $selectProvider.on('change', () => {
+            updateTimezone();
+        });
+        
         /**
          * Event: Manage Unavailability Dialog Save Button "Click"
          *
diff --git a/assets/js/utils/calendar_default_view.js b/assets/js/utils/calendar_default_view.js
index 00d05c28..38c2e7af 100755
--- a/assets/js/utils/calendar_default_view.js
+++ b/assets/js/utils/calendar_default_view.js
@@ -1506,6 +1506,8 @@ App.Utils.CalendarDefaultView = (function () {
                                 $('#unavailability-provider option:first').prop('selected', true);
                             }
 
+                            $('#unavailability-provider').trigger('change');
+
                             $('#unavailability-start').datepicker('setDate', info.start);
 
                             $('#unavailability-end').datepicker('setDate', info.end);