feat: layout improvements

assets/controllers/toast_controller.js

@@ -24,14 +24,25 @@ export default class extends Controller {
     }
 
     handleNotifications(event) {
+        console.log('[VOUCHER DEBUG] showNotifications event received:', event)
+        console.log('[VOUCHER DEBUG] event.detail:', event.detail)
+
         // HTMX wraps the trigger value in an object with 'value' and 'elt' properties
         // event.detail.value contains the actual array from the HX-Trigger header
-        const notifications = event.detail?.value || []
+        const notifications = event.detail?.value || event.detail || []
 
-        notifications.forEach(notification => {
+        console.log('[VOUCHER DEBUG] notifications array:', notifications)
-            const className = this.getClassForType(notification.type)
+        console.log('[VOUCHER DEBUG] notifications count:', Array.isArray(notifications) ? notifications.length : 'not an array')
-            this.showToast(notification.message, className)
+
-        })
+        if (Array.isArray(notifications)) {
+            notifications.forEach((notification, index) => {
+                console.log(`[VOUCHER DEBUG] Processing notification ${index}:`, notification)
+                const className = this.getClassForType(notification.type)
+                this.showToast(notification.message, className)
+            })
+        } else {
+            console.error('[VOUCHER DEBUG] Notifications is not an array:', notifications)
+        }
     }
 
     showToast(text, className = '') {
@@ -49,6 +60,7 @@ export default class extends Controller {
         const typeMap = {
             'success': 'toastify--success',
             'warning': 'toastify--warning',
+            'error': 'toastify--error',
             'info': 'toastify--info',
         }
 

assets/styles/components/toast.css

@@ -14,6 +14,11 @@
     background: theme('colors.red.600');
 }
 
+.toastify--error {
+    @apply text-gray-100;
+    background: theme('colors.red.700');
+}
+
 .toastify--info {
     @apply text-gray-100;
     background: theme('colors.primary');

templates/booking/_summary.html.twig

@@ -48,18 +48,17 @@
         {% if cmsData.hotel.images is defined %}
             <img src="{{ cmsData.hotel.images.resized.l[0].url }}" alt="{{ cmsData.hotel.images.resized.s[0].alt }}" class="w-full rounded mb-4">
         {% endif %}
-        {% if cmsData.hotel.address is defined %}
-            <address>
-                {{ cmsData.hotel.name }}
-                <br>
-                {{ cmsData.hotel.address | nl2br }}
-            </address>
-        {% endif %}
         <div class="space-y-2 text-sm text-gray-600">
             <div><span class="font-medium">Reise:</span> {{ bookingCreateDto.travel.label }}</div>
+            {% if cmsData.region is defined %}
+                <div><span class="font-medium">Gebiet:</span> {{ cmsData.region.name }}</div>
+            {% endif %}
+            {% if cmsData.country is defined %}
+                <div><span class="font-medium">Land:</span> {{ cmsData.country.name }}</div>
+            {% endif %}
             <div><span class="font-medium">Zeitraum:</span> {{ bookingCreateDto.travel.dateFrom|date('d.m.Y') }} - {{ bookingCreateDto.travel.dateTo|date('d.m.Y') }}</div>
-            <div><span class="font-medium">Hotel:</span> {{ bookingCreateDto.travel.hotel.name }}</div>
+            <div><span class="font-medium">Unterkunft:</span> {{ bookingCreateDto.travel.hotel.name }}{% if cmsData.hotel.address is defined %}, {{ cmsData.hotel.address | replace({"\n": ', '}) }}{% endif %}</div>
-            <div><span class="font-medium">Teilnehmer:</span> {{ participantCount }}</div>
+            <div><span class="font-medium">Anzahl Teilnehmer:</span> {{ participantCount }}</div>
         </div>
     </div>