Move the terms and privacy checkbox to the last step.

application/views/components/booking_final_step.php

@@ -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">

application/views/components/booking_info_step.php

@@ -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">

application/views/pages/booking.php

@@ -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'),
+    'require_notes' => vars('require_notes')
-    'display_terms_and_conditions' => vars('display_terms_and_conditions'),
-    'display_privacy_policy' => vars('display_privacy_policy'),
 ]) ?>
 
 <!-- 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') ?>
 

assets/js/pages/booking.js

@@ -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
+         * Before the form is submitted to the server we need to make sure that in the meantime the selected appointment
-         * in the meantime the selected appointment date/time wasn't reserved by
+         * date/time wasn't reserved by another customer or event.
-         * 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');