UI improvements

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>