Replace Google Client JS with the Google Calendar Template link in the book success page (#1216)

This commit is contained in:
Alex Tselegidis 2022-02-24 15:38:51 +01:00
parent df0b461fef
commit a759cb89f7
3 changed files with 33 additions and 122 deletions

View file

@ -303,7 +303,7 @@ class Appointments extends EA_Controller {
}
/**
* GET an specific appointment book and redirect to the success screen.
* GET a specific appointment book and redirect to the success screen.
*
* @param string $appointment_hash The appointment hash identifier.
*
@ -315,12 +315,18 @@ class Appointments extends EA_Controller {
if (empty($appointments))
{
redirect('appointments'); // The appointment does not exist.
$vars = [
'message_title' => lang('appointment_not_found'),
'message_text' => lang('appointment_does_not_exist_in_db'),
'message_icon' => base_url('assets/img/error.png')
];
$this->load->view('appointments/message', $vars);
return;
}
$appointment = $appointments[0];
unset($appointment['notes']);
$customer = $this->customers_model->get_row($appointment['id_users_customer']);
@ -330,6 +336,21 @@ class Appointments extends EA_Controller {
$company_name = $this->settings_model->get_setting('company_name');
$appointment_start_instance = new DateTime($appointment['start_datetime']);
$appointment_end_instance = new DateTime($appointment['end_datetime']);
$add_to_google_url_params = [
'action' => 'TEMPLATE',
'text' => $service['name'],
'dates' => $appointment_start_instance->format('Ymd\THis\Z') . '/' . $appointment_end_instance->format('Ymd\THis\Z'),
'location' => $company_name,
'details' => 'View/Change Appointment: ' . site_url('appointments/index/' . $appointment['hash']),
'add' => $provider['email'] . ',' . $customer['email']
];
$add_to_google_url = 'https://calendar.google.com/calendar/render?' . http_build_query($add_to_google_url_params);
// Get any pending exceptions.
$exceptions = $this->session->flashdata('book_success');
@ -354,6 +375,7 @@ class Appointments extends EA_Controller {
'name' => $service['name'],
],
'company_name' => $company_name,
'add_to_google_url' => $add_to_google_url,
];
if ($exceptions)

View file

@ -42,12 +42,10 @@
<?= lang('go_to_booking_page') ?>
</a>
<?php if (config('google_sync_feature')): ?>
<button id="add-to-google-calendar" class="btn btn-primary">
<a href="<?= $add_to_google_url ?>" id="add-to-google-calendar" class="btn btn-primary" target="_blank">
<i class="fas fa-plus"></i>
<?= lang('add_to_google_calendar') ?>
</button>
<?php endif ?>
</a>
<?php if (isset($exceptions)): ?>
<div class="m-2">
@ -75,7 +73,6 @@
<script src="<?= base_url('assets/ext/datejs/date.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= asset_url('assets/ext/moment/moment-timezone-with-data.min.js') ?>"></script>
<script src="https://apis.google.com/js/client.js"></script>
<script>
var GlobalVariables = {
@ -85,9 +82,6 @@
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'
};
var EALang = <?= json_encode($this->lang->language) ?>;

View file

@ -10,112 +10,7 @@
* ---------------------------------------------------------------------------- */
$(document).ready(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
*
* This method handles the authorization result. If the user granted access to his data, then the
* appointment is going to be added to his calendar.
*
* @param {Boolean} authResult The user's authorization result.
*/
function handleAuthResult(authResult) {
try {
if (authResult.error) {
throw new Error('Could not authorize user.');
}
//
// 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 appointmentData = GlobalVariables.appointmentData;
// Create a valid Google Calendar API resource for the new event.
var resource = {
summary: GlobalVariables.serviceData.name,
location: GlobalVariables.companyName,
start: {
dateTime: moment.tz(appointmentData.start_datetime, providerData.timezone).format()
},
end: {
dateTime: moment.tz(appointmentData.end_datetime, providerData.timezone).format()
},
attendees: [
{
email: GlobalVariables.providerData.email,
displayName: GlobalVariables.providerData.first_name + ' '
+ GlobalVariables.providerData.last_name
}
]
};
gapi.client.load('calendar', 'v3', function () {
var request = gapi.client.calendar.events.insert({
calendarId: 'primary',
resource: resource
});
request.execute(function (response) {
if (response.error) {
throw new Error('Could not add the event to Google Calendar.');
}
$('#success-frame').append(
$('<br/>'),
$('<div/>', {
'class': 'alert alert-success col-xs-12',
'html': [
$('<h4/>', {
'text': EALang.success
}),
$('<p/>', {
'text': EALang.appointment_added_to_google_calendar
}),
$('<a/>', {
'href': response.htmlLink,
'text': EALang.view_appointment_in_google_calendar
})
]
})
);
$('#add-to-google-calendar').hide();
});
});
} catch (error) {
// The user denied access or something else happened, display corresponding message on the screen.
$('#success-frame').append(
$('<br/>'),
$('<div/>', {
'class': 'alert alert-danger col-xs-12',
'html': [
$('<h4/>', {
'text': EALang.oops_something_went_wrong
}),
$('<p/>', {
'text': EALang.could_not_add_to_google_calendar
}),
$('<pre/>', {
'text': error.message
}),
]
})
);
}
}
});