Optimize column display in the booking page.

application/views/components/booking_info_step.php

@@ -27,7 +27,7 @@
         <h2 class="frame-title"><?= lang('customer_information') ?></h2>
 
         <div class="row frame-content">
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-md-6 field-col m-auto">
                 <?php if ($display_first_name): ?>
                     <div class="mb-3">
                         <label for="first-name" class="form-label">
@@ -81,7 +81,7 @@
                 <?php endif ?>
             </div>
 
-            <div class="col-12 col-md-6">
+            <div class="col-12 col-md-6 field-col m-auto">
                 <?php if ($display_address) : ?>
                     <div class="mb-3">
                         <label for="address" class="form-label">

assets/js/pages/booking.js

@@ -169,6 +169,8 @@ App.Pages.Booking = (function () {
         // Bind the event handlers (might not be necessary every time we use this class).
         addEventListeners();
 
+        optimizeContactInfoDisplay();
+
         // If the manage mode is true, the appointments data should be loaded by default.
         if (manageMode) {
             applyAppointmentData(vars('appointment_data'), vars('provider_data'), vars('customer_data'));
@@ -218,6 +220,21 @@ App.Pages.Booking = (function () {
         }
     }
 
+    /**
+     * Remove empty columns and center elements if needed.
+     */
+    function optimizeContactInfoDisplay() {
+        const $fieldCols = $(document).find('#wizard-frame-3 .field-col');
+
+        $fieldCols.each((index, fieldColEl) => {
+            const $fieldCol = $(fieldColEl);
+
+            if (!$fieldCol.find('.form-control').length) {
+                $fieldCol.hide();
+            }
+        });
+    }
+
     /**
      * Add the page event listeners.
      */