Handling of event addons

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

@@ -7,6 +7,8 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
 const props = defineProps({
     formData: Object,
     event: Object,
+    summaryBaseAmount: {type: String, default: ''},
+    summaryAddonLines: {type: Array, default: () => []},
     summaryAmount: String,
     summaryAmountValue: {type: Number, default: 0},
     summaryLoading: Boolean,
@@ -32,8 +34,17 @@ const paymentConfirmationText = computed(() => {
     return template.replaceAll('{amount}', props.summaryAmount ?? '')
 })
 
-// Zurück führt zur Zahlungsart (9), sofern dieser Schritt gezeigt wurde; bei 0 € direkt zu Allergien (8).
-const backTarget = computed(() => props.summaryAmountValue > 0 ? 9 : 8)
+// 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 Teilnahmeoptionen für die Zusammenfassung (label statt value anzeigen).
+const selectedParticipationOptions = computed(() =>
+    (props.event.participationOptions ?? []).map(question => {
+        const value = props.formData.participationOptions[question.key]
+        const option = (question.options ?? []).find(o => o.value === value)
+        return {label: question.title || question.label, value: option?.label ?? ''}
+    }).filter(entry => entry.value !== '')
+)
 
 const canSubmit = computed(() =>
     props.formData.summary_information_correct
@@ -115,6 +126,11 @@ function eatingHabit() {
                     <td>{{ participationGroup() }}</td>
                 </tr>
 
+                <tr v-for="option in selectedParticipationOptions" :key="option.label">
+                    <td>{{ option.label }}:</td>
+                    <td>{{ option.value }}</td>
+                </tr>
+
                 <tr>
                     <td>Foto-Erlaubnis:</td>
                     <td>
@@ -149,6 +165,22 @@ function eatingHabit() {
                 <tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</td></tr>
             </table>
 
+            <h4 style="margin: 0 0 8px 0;">Kostenübersicht</h4>
+            <table class="form-table cost-table" style="margin-bottom: 20px;">
+                <tr>
+                    <td>Teilnahmebeitrag:</td>
+                    <td>{{ summaryBaseAmount }}</td>
+                </tr>
+                <tr v-for="addon in summaryAddonLines" :key="addon.key">
+                    <td>{{ addon.title }}:</td>
+                    <td>{{ addon.free ? 'Kostenfrei' : addon.amount }}</td>
+                </tr>
+                <tr class="cost-total">
+                    <td><strong>Gesamtbetrag:</strong></td>
+                    <td><strong>{{ summaryAmount }}</strong></td>
+                </tr>
+            </table>
+
             <div style="display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px;">
                 <label style="display: flex; gap: 10px; cursor: pointer;">
                     <input type="checkbox" v-model="formData.summary_information_correct" />
@@ -182,3 +214,10 @@ function eatingHabit() {
         </div>
     </div>
 </template>
+
+<style scoped>
+.cost-table .cost-total td {
+    border-top: 1px solid #d1d5db;
+    padding-top: 8px;
+}
+</style>