Skip the first booking step if both service and provider were preselected (#1117).

application/views/components/booking_header.php

@@ -7,7 +7,17 @@
 ?>
 
 <div id="header">
-    <span id="company-name"><?= $company_name ?></span>
+    <div id="company-name">
+        <?= $company_name ?>
+        <div class="d-flex justify-content-between">
+            <span class="display-selected-service">
+                &nbsp;
+            </span>
+            <span class="display-selected-provider">
+                &nbsp;
+            </span>
+        </div>
+    </div>
 
     <div id="steps">
         <div id="step-1" class="book-step active-step"

assets/css/layouts/booking_layout.scss

@@ -51,6 +51,14 @@ body {
     font-weight: lighter;
     color: #fff;
     margin: 20px 0;
+    
+    .display-selected-service,
+    .display-selected-provider {
+        color: #225d4d;
+        font-size: 60%;
+        font-weight: normal;
+    }
+
 }
 
 #book-appointment-wizard #steps {
@@ -280,7 +288,7 @@ body {
     #book-appointment-wizard #company-name {
         display: inline-block;
         float: left;
-        margin: 10px auto;
+        margin: 0 auto;
     }
 
     #book-appointment-wizard #steps {

assets/js/pages/booking.js

@@ -199,6 +199,22 @@ App.Pages.Booking = (function () {
             if (selectedProviderId && $selectProvider.find('option[value="' + selectedProviderId + '"]').length > 0) {
                 $selectProvider.val(selectedProviderId).trigger('change');
             }
+
+            if (selectedServiceId && selectedProviderId) {
+                $selectService.closest('.wizard-frame').find('.button-next').trigger('click');
+
+                $(document).find('.book-step:first').hide();
+
+                $(document).find('.button-back:first').css('visibility', 'hidden');
+
+                $(document)
+                    .find('.book-step:not(:first)')
+                    .each((index, bookStepEl) =>
+                        $(bookStepEl)
+                            .find('strong')
+                            .text(index + 1)
+                    );
+            }
         }
     }
 
@@ -571,6 +587,10 @@ App.Pages.Booking = (function () {
             }
         });
 
+        $(document).find('.display-selected-service').text($selectService.find('option:selected').text());
+
+        $(document).find('.display-selected-provider').text($selectProvider.find('option:selected').text());
+
         $('#appointment-details').empty();
 
         $('<div/>', {