Add customer language and timezone fields to the appointments modal (#1094)

application/controllers/Calendar.php

@@ -137,6 +137,7 @@ class Calendar extends EA_Controller {
             'user_display_name' => $this->accounts->get_user_display_name($user_id),
             'timezone' => session('timezone'),
             'timezones' => $this->timezones->to_array(),
+            'grouped_timezones' => $this->timezones->to_grouped_array(),
             'privileges' => $privileges,
             'calendar_view' => $calendar_view,
             'available_providers' => $available_providers,

application/views/components/appointments_modal.php

@@ -243,6 +243,20 @@
                                     <input type="text" id="phone-number" maxlength="60"
                                            class="<?= $require_phone_number ? 'required' : '' ?> form-control"/>
                                 </div>
+
+                                <div class="mb-3">
+                                    <label class="form-label" for="language">
+                                        <?= lang('language') ?>
+                                        <span class="text-danger" hidden>*</span>
+                                    </label>
+                                    <select id="language" class="form-control required">
+                                        <?php foreach (vars('available_languages') as $available_language): ?>
+                                            <option value="<?= $available_language ?>">
+                                                <?= ucfirst($available_language) ?>
+                                            </option>
+                                        <?php endforeach ?>
+                                    </select>
+                                </div>
                             </div>
                             <div class="col-12 col-sm-6">
                                 <div class="mb-3">
@@ -281,6 +295,17 @@
                                            maxlength="120"/>
                                 </div>
 
+                                <div class="mb-3">
+                                    <label class="form-label" for="timezone">
+                                        <?= lang('timezone') ?>
+                                        <span class="text-danger" hidden>*</span>
+                                    </label>
+                                    <?php component('timezone_dropdown', [
+                                        'attributes' => 'id="timezone" class="form-control required"',
+                                        'grouped_timezones' => vars('grouped_timezones')
+                                    ]) ?>
+                                </div>
+
                                 <div class="mb-3">
                                     <label for="customer-notes" class="form-label">
                                         <?= lang('notes') ?>

application/views/components/timezone_dropdown.php

@@ -3,12 +3,12 @@
  * Local variables.
  * 
  * @var string $attributes
- * @var array $timezones
+ * @var array $grouped_timezones
  */
 ?>
 
 <select <?= $attributes ?>>
-    <?php foreach ($timezones as $continent => $entries): ?>
+    <?php foreach ($grouped_timezones as $continent => $entries): ?>
         <optgroup label="<?= $continent ?>">
             <?php foreach ($entries as $value => $name): ?>
                 <option value="<?= $value ?>"><?= $name ?></option>

assets/js/components/appointments_modal.js

@@ -29,6 +29,8 @@ App.Components.AppointmentsModal = (function () {
     const $address = $('#address');
     const $city = $('#city');
     const $zipCode = $('#zip-code');
+    const $language = $('#language');
+    const $timezone = $('#timezone');
     const $customerNotes = $('#customer-notes');
     const $selectCustomer = $('#select-customer');
     const $saveAppointment = $('#save-appointment');
@@ -104,6 +106,8 @@ App.Components.AppointmentsModal = (function () {
                 address: $address.val(),
                 city: $city.val(),
                 zip_code: $zipCode.val(),
+                language: $language.val(),
+                timezone: $timezone.val(),
                 notes: $customerNotes.val()
             };
 
@@ -248,6 +252,8 @@ App.Components.AppointmentsModal = (function () {
                 $address.val(customer.address);
                 $city.val(customer.city);
                 $zipCode.val(customer.zip_code);
+                $language.val(customer.language);
+                $timezone.val(customer.timezone);
                 $customerNotes.val(customer.notes);
             }
 
@@ -378,12 +384,17 @@ App.Components.AppointmentsModal = (function () {
          * Event: Enter New Customer Button "Click"
          */
         $newCustomer.on('click', () => {
-            $appointmentsModal
-                .find(
-                    '#customer-id, #first-name, #last-name, #email, ' +
-                        '#phone-number, #address, #city, #zip-code, #customer-notes'
-                )
-                .val('');
+            $customerId.val('');
+            $firstName.val('');
+            $lastName.val('');
+            $email.val('');
+            $phoneNumber.val('');
+            $address.val('');
+            $city.val('');
+            $zipCode.val('');
+            $language.val('english');
+            $timezone.val('UTC');
+            $customerNotes.val('');
         });
     }
 
@@ -397,6 +408,9 @@ App.Components.AppointmentsModal = (function () {
         // Empty form fields.
         $appointmentsModal.find('input, textarea').val('');
         $appointmentsModal.find('.modal-message').fadeOut();
+        
+        $language.val('english');
+        $timezone.val('UTC');
 
         // Reset color.
         $appointmentColor.find('.color-selection-option:first').trigger('click');

assets/js/utils/calendar_default_view.js

@@ -146,6 +146,8 @@ App.Utils.CalendarDefaultView = (function () {
                 $appointmentsModal.find('#address').val(customer.address);
                 $appointmentsModal.find('#city').val(customer.city);
                 $appointmentsModal.find('#zip-code').val(customer.zip_code);
+                $appointmentsModal.find('#language').val(customer.language);
+                $appointmentsModal.find('#timezone').val(customer.timezone);
                 $appointmentsModal.find('#appointment-location').val(appointment.location);
                 $appointmentsModal.find('#appointment-notes').val(appointment.notes);
                 $appointmentsModal.find('#customer-notes').val(customer.notes);
@@ -1666,6 +1668,8 @@ App.Utils.CalendarDefaultView = (function () {
             $appointmentsModal.find('#address').val(customer.address);
             $appointmentsModal.find('#city').val(customer.city);
             $appointmentsModal.find('#zip-code').val(customer.zip_code);
+            $appointmentsModal.find('#language').val(customer.language);
+            $appointmentsModal.find('#timezone').val(customer.timezone);
             $appointmentsModal.find('#appointment-location').val(appointment.location);
             $appointmentsModal.find('#appointment-notes').val(appointment.notes);
             $appointmentsModal.find('#customer-notes').val(customer.notes);

assets/js/utils/calendar_table_view.js

@@ -217,6 +217,8 @@ App.Utils.CalendarTableView = (function () {
                 $appointmentsModal.find('#address').val(customer.address);
                 $appointmentsModal.find('#city').val(customer.city);
                 $appointmentsModal.find('#zip-code').val(customer.zip_code);
+                $appointmentsModal.find('#language').val(customer.language);
+                $appointmentsModal.find('#timezone').val(customer.timezone);
                 $appointmentsModal.find('#appointment-location').val(appointment.location);
                 $appointmentsModal.find('#appointment-notes').val(appointment.notes);
                 $appointmentsModal.find('#customer-notes').val(customer.notes);