Handling of event addons

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

@@ -1,6 +1,10 @@
 <script setup>
+import {nextVisibleFrom, STEP_ADDONS} from "../composables/stepFlow.js";
+
 const props = defineProps({ formData: Object, event: Object, selectedAddons: Object })
 const emit = defineEmits(['next', 'back'])
+
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_ADDONS))
 </script>
 
 <template>
@@ -25,13 +29,21 @@ const emit = defineEmits(['next', 'back'])
         <!-- 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>
@@ -39,7 +51,7 @@ const emit = defineEmits(['next', 'back'])
 
         <div class="btn-row">
             <button type="button" class="btn-secondary" @click="emit('back', 5)">← Zurück</button>
-            <button type="button" class="btn-primary" @click="emit('next', 7)">Weiter →</button>
+            <button type="button" class="btn-primary" @click="next">Weiter →</button>
         </div>
     </div>
 </template>