UI improvements

app/Domains/Event/Views/Partials/SignUpForm/SignupForm.vue

@@ -24,7 +24,8 @@ const emit = defineEmits(['registrationDone'])
 
 const {
     currentStep, goToStep, formData, selectedAddons,
-    submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue
+    submit, submitting, submitResult, summaryLoading, summaryAmount, summaryAmountValue,
+    summaryBaseAmount, summaryAddonLines
 } = useSignupForm(props.event, props.participantData)
 
 const steps = [
@@ -107,7 +108,8 @@ const steps = [
                     v-if="currentStep === 11"
                     :formData="formData"
                     :event="event"
-                    :selectedAddons="selectedAddons"
+                    :summaryBaseAmount="summaryBaseAmount"
+                    :summaryAddonLines="summaryAddonLines"
                     :summaryAmount="summaryAmount"
                     :summaryAmountValue="summaryAmountValue"
                     :summaryLoading="summaryLoading"

app/Domains/Event/Views/Partials/SignUpForm/composables/useSignupForm.js

@@ -60,6 +60,8 @@ export function useSignupForm(event, participantData) {
 
     const summaryAmount = ref('')
     const summaryAmountValue = ref(0)
+    const summaryBaseAmount = ref('')
+    const summaryAddonLines = ref([])
 
     const fetchAmount = async () => {
         summaryLoading.value = true
@@ -77,6 +79,8 @@ export function useSignupForm(event, participantData) {
             })
             summaryAmount.value = res.data.amount
             summaryAmountValue.value = Number(res.data.amountValue ?? 0)
+            summaryBaseAmount.value = res.data.baseAmount ?? ''
+            summaryAddonLines.value = res.data.addons ?? []
         } finally {
             summaryLoading.value = false
         }
@@ -128,6 +132,8 @@ export function useSignupForm(event, participantData) {
         submitResult,
         summaryLoading,
         summaryAmount,
-        summaryAmountValue
+        summaryAmountValue,
+        summaryBaseAmount,
+        summaryAddonLines
     }
 }

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

@@ -7,7 +7,8 @@ const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'
 const props = defineProps({
     formData: Object,
     event: Object,
-    selectedAddons: {type: Object, default: () => ({})},
+    summaryBaseAmount: {type: String, default: ''},
+    summaryAddonLines: {type: Array, default: () => []},
     summaryAmount: String,
     summaryAmountValue: {type: Number, default: 0},
     summaryLoading: Boolean,
@@ -36,16 +37,6 @@ 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 => {
@@ -140,11 +131,6 @@ 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>
@@ -179,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" />
@@ -212,3 +214,10 @@ function eatingHabit() {
         </div>
     </div>
 </template>
+
+<style scoped>
+.cost-table .cost-total td {
+    border-top: 1px solid #d1d5db;
+    padding-top: 8px;
+}
+</style>