Move the terms and privacy checkbox to the last step.

This commit is contained in:
Alex Tselegidis 2022-01-24 21:04:03 +01:00
parent d580463977
commit 442c644c01
4 changed files with 56 additions and 49 deletions

View file

@ -3,6 +3,8 @@
* Local variables.
*
* @var bool $manage_mode
* @var string $display_terms_and_conditions
* @var string $display_privacy_policy
*/
?>
@ -30,6 +32,34 @@
<?php endif; ?>
</div>
<?php if ($display_terms_and_conditions): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
<label class="form-check-label" for="accept-to-terms-and-conditions">
<?= strtr(lang('read_and_agree_to_terms_and_conditions'),
[
'{$link}' => '<a href="#" data-bs-toggle="modal" data-bs-target="#terms-and-conditions-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<?php if ($display_privacy_policy): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
<label class="form-check-label" for="accept-to-privacy-policy">
<?= strtr(lang('read_and_agree_to_privacy_policy'),
[
'{$link}' => '<a href="#" data-bs-toggle="modal" data-bs-target="#privacy-policy-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<div class="command-buttons">
<button type="button" id="button-back-4" class="btn button-back btn-outline-secondary"
data-step_index="4">

View file

@ -18,8 +18,6 @@
* @var string $require_zip_code
* @var string $display_notes
* @var string $require_notes
* @var string $display_terms_and_conditions
* @var string $display_privacy_policy
*/
?>
@ -132,34 +130,6 @@
</div>
</div>
<?php if ($display_terms_and_conditions): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-terms-and-conditions">
<label class="form-check-label" for="accept-to-terms-and-conditions">
<?= strtr(lang('read_and_agree_to_terms_and_conditions'),
[
'{$link}' => '<a href="#" data-bs-toggle="modal" data-bs-target="#terms-and-conditions-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<?php if ($display_privacy_policy): ?>
<div class="form-check mb-3">
<input type="checkbox" class="required form-check-input" id="accept-to-privacy-policy">
<label class="form-check-label" for="accept-to-privacy-policy">
<?= strtr(lang('read_and_agree_to_privacy_policy'),
[
'{$link}' => '<a href="#" data-bs-toggle="modal" data-bs-target="#privacy-policy-modal">',
'{/$link}' => '</a>'
])
?>
</label>
</div>
<?php endif ?>
<div class="command-buttons">
<button type="button" id="button-back-3" class="btn button-back btn-outline-secondary"
data-step_index="3">

View file

@ -36,14 +36,16 @@
'display_zip_code' => vars('display_zip_code'),
'require_zip_code' => vars('require_zip_code'),
'display_notes' => vars('display_notes'),
'require_notes' => vars('require_notes'),
'display_terms_and_conditions' => vars('display_terms_and_conditions'),
'display_privacy_policy' => vars('display_privacy_policy'),
'require_notes' => vars('require_notes')
]) ?>
<!-- Appointment Data Confirmation -->
<?php component('booking_final_step', ['manage_mode' => vars('manage_mode')]) ?>
<?php component('booking_final_step', [
'manage_mode' => vars('manage_mode'),
'display_terms_and_conditions' => vars('display_terms_and_conditions'),
'display_privacy_policy' => vars('display_privacy_policy'),
]) ?>
<?php section('content') ?>

View file

@ -485,13 +485,30 @@ App.Pages.Booking = (function () {
/**
* Event: Book Appointment Form "Submit"
*
* Before the form is submitted to the server we need to make sure that
* in the meantime the selected appointment date/time wasn't reserved by
* another customer or event.
* Before the form is submitted to the server we need to make sure that in the meantime the selected appointment
* date/time wasn't reserved by another customer or event.
*
* @param {jQuery.Event} event
*/
$bookAppointmentSubmit.on('click', () => {
const $acceptToTermsAndConditions = $('#accept-to-terms-and-conditions');
$acceptToTermsAndConditions.removeClass('is-invalid');
if ($acceptToTermsAndConditions.length && !$acceptToTermsAndConditions.prop('checked')) {
$acceptToTermsAndConditions.addClass('is-invalid');
return;
}
const $acceptToPrivacyPolicy = $('#accept-to-privacy-policy');
$acceptToPrivacyPolicy.removeClass('is-invalid');
if ($acceptToPrivacyPolicy.length && !$acceptToPrivacyPolicy.prop('checked')) {
$acceptToPrivacyPolicy.addClass('is-invalid');
return;
}
App.Http.Booking.registerAppointment();
});
@ -534,18 +551,6 @@ App.Pages.Booking = (function () {
throw new Error(lang('fields_are_required'));
}
const $acceptToTermsAndConditions = $('#accept-to-terms-and-conditions');
if ($acceptToTermsAndConditions.length && !$acceptToTermsAndConditions.prop('checked')) {
$acceptToTermsAndConditions.parents('.form-check').addClass('text-danger');
throw new Error(lang('fields_are_required'));
}
const $acceptToPrivacyPolicy = $('#accept-to-privacy-policy');
if ($acceptToPrivacyPolicy.length && !$acceptToPrivacyPolicy.prop('checked')) {
$acceptToPrivacyPolicy.parents('.form-check').addClass('text-danger');
throw new Error(lang('fields_are_required'));
}
// Validate email address.
if ($email.val() && !App.Utils.Validation.email($email.val())) {
$email.addClass('is-invalid');