diff --git a/application/views/components/booking_type_step.php b/application/views/components/booking_type_step.php
index 225d5c14..833150a8 100644
--- a/application/views/components/booking_type_step.php
+++ b/application/views/components/booking_type_step.php
@@ -83,7 +83,9 @@
-
+
+
+
diff --git a/assets/js/pages/booking.js b/assets/js/pages/booking.js
index 7fee4db6..e0c7eb83 100644
--- a/assets/js/pages/booking.js
+++ b/assets/js/pages/booking.js
@@ -833,6 +833,8 @@ App.Pages.Booking = (function () {
}
/**
+ * Update the service description and information.
+ *
* This method updates the HTML content with a brief description of the
* user selected service (only if available in db). This is useful for the
* customers upon selecting the correct service.
@@ -849,41 +851,45 @@ App.Pages.Booking = (function () {
);
if (!service) {
- return;
+ return; // Service not found
}
- $('', {
- 'text': App.Utils.String.escapeHtml(service.name),
- }).appendTo($serviceDescription);
+ // Render the additional service information
- if (service.description) {
- $('
').appendTo($serviceDescription);
-
- $('', {
- 'html': App.Utils.String.escapeHtml(service.description).replaceAll('\n', '
'),
- }).appendTo($serviceDescription);
- }
-
- if (service.duration || Number(service.price) > 0 || service.location) {
- $('
').appendTo($serviceDescription);
- }
+ const additionalInfoParts = [];
if (service.duration) {
- $('', {
- 'text': '[' + lang('duration') + ' ' + service.duration + ' ' + lang('minutes') + ']',
- }).appendTo($serviceDescription);
+ additionalInfoParts.push(`${lang('duration')}: ${service.duration} ${lang('minutes')}`);
}
if (Number(service.price) > 0) {
- $('', {
- 'text': '[' + lang('price') + ' ' + service.price + ' ' + service.currency + ']',
- }).appendTo($serviceDescription);
+ additionalInfoParts.push(`${lang('price')}: ${service.price} ${service.currency}`);
}
if (service.location) {
- $('', {
- 'text': '[' + lang('location') + ' ' + service.location + ']',
- }).appendTo($serviceDescription);
+ additionalInfoParts.push(`${lang('location')}: ${service.location}`);
+ }
+
+ if (additionalInfoParts.length) {
+ $(`
+
+ ${additionalInfoParts.join(', ')}
+
+ `).appendTo($serviceDescription);
+ }
+
+ // Render the service description
+
+ if (service.description.length) {
+ const escapedDescription = App.Utils.String.escapeHtml(service.description);
+
+ const multiLineDescription = escapedDescription.replaceAll('\n', '
');
+
+ $(`
+
+ ${multiLineDescription}
+
+ `).appendTo($serviceDescription);
}
}