Event addons bookable

app/Domains/Event/Views/Partials/SignUpForm/steps/StepAddons.vue

@@ -29,13 +29,21 @@ const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
         <!-- Addons -->
         <div v-if="event.addons?.length > 0">
             <h3>Zusatzoptionen</h3>
-            <div v-for="addon in event.addons" :key="addon.id" style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
+            <div v-for="addon in event.addons" :key="addon.key"
+                 style="margin-bottom: 16px; padding: 12px; background: #f8fafc; border-radius: 8px;">
                 <label style="display: flex; gap: 12px; cursor: pointer;">
-                    <input type="checkbox" v-model="selectedAddons[addon.id]" style="margin-top: 4px;" />
+                    <input type="checkbox" v-model="selectedAddons[addon.key]" style="margin-top: 4px;"/>
                     <span>
-                        <strong>{{ addon.name }}</strong>
-                        <span style="display: block; color: #6b7280; font-size: 0.875rem;">Betrag: {{ addon.amount }}</span>
-                        <span style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{ addon.description }}</span>
+                        <strong>{{ addon.title }}</strong>
+                        <span style="display: block; color: #6b7280; font-size: 0.875rem;">
+                            <template v-if="addon.free">Kostenfrei</template>
+                            <template v-else>{{ addon.priceReadable }}<template
+                                v-if="!addon.flat"> / Tag</template></template>
+                        </span>
+                        <span v-if="addon.description"
+                              style="display: block; color: #374151; font-size: 0.875rem; margin-top: 4px;">{{
+                                addon.description
+                            }}</span>
                     </span>
                 </label>
             </div>

app/Domains/Event/Views/Partials/SignUpForm/steps/StepSummary.vue

@@ -7,6 +7,7 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
 const props = defineProps({
     formData: Object,
     event: Object,
+    selectedAddons: {type: Object, default: () => ({})},
     summaryAmount: String,
     summaryAmountValue: {type: Number, default: 0},
     summaryLoading: Boolean,
@@ -35,6 +36,16 @@ const paymentConfirmationText = computed(() => {
 // Zurück führt zur Zahlungsart (10), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (9).
 const backTarget = computed(() => props.summaryAmountValue > 0 ? 10 : 9)
 
+// Gewählte Zusätze (Event-Addons) für die Zusammenfassung mit Preisanzeige.
+const selectedAddonList = computed(() =>
+    (props.event.addons ?? [])
+        .filter(addon => props.selectedAddons[addon.key])
+        .map(addon => ({
+            title: addon.title,
+            price: addon.free ? 'Kostenfrei' : (addon.priceReadable + (addon.flat ? '' : ' / Tag')),
+        }))
+)
+
 // Gewählte Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
 const selectedParticipationOptions = computed(() =>
     (props.event.participationOptions ?? []).map(question => {
@@ -129,6 +140,11 @@ function eatingHabit() {
                     <td>{{ option.value }}</td>
                 </tr>
 
+                <tr v-for="addon in selectedAddonList" :key="addon.title">
+                    <td>{{ addon.title }}:</td>
+                    <td>{{ addon.price }}</td>
+                </tr>
+
                 <tr>
                     <td>Foto-Erlaubnis:</td>
                     <td>