Refactor the booking confirmation related JS files so that they become standalone modules.

application/controllers/Booking_confirmation.php

@@ -37,7 +37,7 @@ class Booking_confirmation extends EA_Controller {
      */
     public function of()
     {
-        $appointment_hash = $this->uri->segment(2);
+        $appointment_hash = $this->uri->segment(3);
 
         $occurrences = $this->appointments_model->get(['hash' => $appointment_hash]);
 
@@ -52,8 +52,6 @@ class Booking_confirmation extends EA_Controller {
 
         unset($appointment['notes']);
 
-        $customer = $this->customers_model->find($appointment['id_users_customer']);
-
         $provider = $this->providers_model->find($appointment['id_users_provider']);
 
         $this->providers_model->only($provider, [
@@ -76,15 +74,20 @@ class Booking_confirmation extends EA_Controller {
 
         $company_name = setting('company_name');
 
-        html_vars([
+        script_vars([
-            'page_title' => lang('success'),
             'appointment_data' => $appointment,
             'provider_data' => $provider,
-            'customer_data' => $customer,
             'service_data' => $service,
             'company_name' => $company_name,
+            'google_api_scope' => 'https://www.googleapis.com/auth/calendar',
+            'google_api_key' => config('google_api_key'),
+            'google_client_id' => config('google_api_key'),
         ]);
-        
+
+        html_vars([
+            'page_title' => lang('success'),
+        ]);
+
         $this->load->view('pages/booking_confirmation', html_vars());
     }
 }

application/views/pages/booking_confirmation.php

@@ -1,13 +1,3 @@
-<?php
-/**
- * @var string $company_name
- * @var array $appointment_data
- * @var array $provider_data
- * @var array $customer_data
- * @var array $service_data
- */
-?>
-
 <?php extend('layouts/message_layout') ?>
 
 <?php section('content') ?>
@@ -42,19 +32,15 @@
     <?php endif ?>
 </div>
 
-<script>
-    var GlobalVariables = {
-        csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
-        appointmentData: <?= json_encode($appointment_data) ?>,
-        providerData: <?= json_encode($provider_data) ?>,
-        customerData: <?= json_encode($customer_data) ?>,
-        serviceData: <?= json_encode($service_data) ?>,
-        companyName: <?= json_encode($company_name) ?>,
-        googleApiKey: <?= json_encode(config('google_api_key')) ?>,
-        googleClientId: <?= json_encode(config('google_client_id')) ?>,
-        googleApiScope: 'https://www.googleapis.com/auth/calendar'
-    };
-</script>
-
 <?php section('content') ?>
 
+<?php section('scripts') ?>
+
+<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
+<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
+<script src="<?= asset_url('assets/js/pages/booking_confirmation.js') ?>"></script>
+
+<?php section('scripts') ?>
+

assets/js/pages/booking_confirmation.js

@@ -9,26 +9,7 @@
  * @since       v1.0.0
  * ---------------------------------------------------------------------------- */
 
-$(document).ready(function () {
+App.Pages.BookingConfirmation = (function () {
-    /**
-     * Event: Add Appointment to Google Calendar "Click"
-     *
-     * This event handler adds the appointment to the users Google Calendar Account. The event is going to
-     * be added to the "primary" calendar. In order to use the API the javascript client library provided by
-     * Google is necessary.
-     */
-    $('#add-to-google-calendar').on('click', function () {
-        gapi.client.setApiKey(GlobalVariables.googleApiKey);
-        gapi.auth.authorize(
-            {
-                client_id: GlobalVariables.googleClientId,
-                scope: GlobalVariables.googleApiScope,
-                immediate: false
-            },
-            handleAuthResult
-        );
-    });
-
     /**
      * Handle Authorization Result
      *
@@ -45,14 +26,14 @@ $(document).ready(function () {
 
             // The user has granted access, add the appointment to his calendar. Before making the event.insert request
             // the the event resource data must be prepared.
-            var providerData = GlobalVariables.providerData;
+            var providerData = App.Vars.provider_data;
 
-            var appointmentData = GlobalVariables.appointmentData;
+            var appointmentData = App.Vars.appointment_data;
 
             // Create a valid Google Calendar API resource for the new event.
             var resource = {
-                summary: GlobalVariables.serviceData.name,
+                summary: App.Vars.service_data.name,
-                location: GlobalVariables.companyName,
+                location: App.Vars.company_name,
                 start: {
                     dateTime: moment.tz(appointmentData.start_datetime, providerData.timezone).format()
                 },
@@ -61,9 +42,8 @@ $(document).ready(function () {
                 },
                 attendees: [
                     {
-                        email: GlobalVariables.providerData.email,
+                        email: App.Vars.provider_data.email,
-                        displayName:
+                        displayName: App.Vars.provider_data.first_name + ' ' + App.Vars.provider_data.last_name
-                            GlobalVariables.providerData.first_name + ' ' + GlobalVariables.providerData.last_name
                     }
                 ]
             };
@@ -121,4 +101,34 @@ $(document).ready(function () {
             );
         }
     }
-});
+
+    function bindEventHandlers() {
+        /**
+         * Event: Add Appointment to Google Calendar "Click"
+         *
+         * This event handler adds the appointment to the users Google Calendar Account. The event is going to
+         * be added to the "primary" calendar. In order to use the API the javascript client library provided by
+         * Google is necessary.
+         */
+        $('#add-to-google-calendar').on('click', function () {
+            gapi.client.setApiKey(App.Vars.google_api_key);
+
+            gapi.auth.authorize(
+                {
+                    client_id: App.Vars.google_client_id,
+                    scope: App.Vars.google_api_scope,
+                    immediate: false
+                },
+                handleAuthResult
+            );
+        });
+    }
+
+    function initialize() {
+        bindEventHandlers();
+    }
+
+    document.addEventListener('DOMContentLoaded', initialize);
+
+    return {};
+})();