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

<script setup>
import {computed} from "vue";
import {format, parseISO} from "date-fns";

const PAYMENT_ACCOUNT_TRANSACTION = 'PAYMENT_ACCOUNT_TRANSACTION'

const props = defineProps({
    formData: Object,
    event: Object,
    summaryAmount: String,
    summaryAmountValue: {type: Number, default: 0},
    summaryLoading: Boolean,
    submitting: Boolean,
})
const emit = defineEmits(['back', 'submit'])

const selectedMethod = computed(() =>
    (props.event.paymentMethods ?? []).find(m => m.slug === props.formData.paymentMethod) ?? null
)

// Die Überweisungs-Bestätigung wird nur bei Banküberweisung verlangt (AC #6).
const requiresPaymentConfirmation = computed(() =>
    props.formData.paymentMethod === PAYMENT_ACCOUNT_TRANSACTION
)

// Bestätigungstext ist ein admin-konfigurierbarer Freitext ({amount}-Platzhalter), sonst Default.
const paymentConfirmationText = computed(() => {
    const configured = selectedMethod.value?.configuration?.summary_confirmation_text
    const template = (configured && String(configured).trim() !== '')
        ? configured
        : 'Ich bestätige, den Betrag von {amount} zu überweisen.'
    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)

const canSubmit = computed(() =>
    props.formData.summary_information_correct
    && props.formData.summary_accept_terms
    && props.formData.legal_accepted
    && (!requiresPaymentConfirmation.value || props.formData.payment)
    && !props.submitting
)

function formatDate(dateString) {
    if (!dateString) return ''
    return format(parseISO(dateString), 'dd.MM.yyyy')
}

function participationGroup() {
    if (props.formData.participationType === 'team') {
        return 'Kernteam';
    }

    if (props.formData.participationType === 'participant') {
        return 'Teilnehmende';
    }

    if (props.formData.participationType === 'volunteer') {
        return 'Unterstützende';
    }

    return 'Sonstige';
}

function eatingHabit() {
    if (props.formData.eatingHabit === 'EATING_HABIT_VEGAN') {
        return 'Vegan';
    }

    if (props.formData.eatingHabit === 'EATING_HABIT_VEGETARIAN') {
        return 'Vegetarisch';
    }

    return 'Omnivor';
}

</script>

<template>
    <div>
        <h3>Zusammenfassung</h3>

        <div v-if="summaryLoading" style="color: #6b7280; padding: 20px 0;">Wird geladen…</div>
        <div v-else>
            <table class="form-table" style="margin-bottom: 20px;">
                <tr>
                    <td>Dein Name:</td>
                    <td>{{props.formData.vorname}} {{props.formData.nachname}}</td>
                </tr>

                <tr>
                    <td>Deine E-Mail:</td>
                    <td>{{props.formData.email_1}}</td>
                </tr>

                <tr v-if="props.formData.ansprechpartner !== ''">
                    <td>Name deiner Kontaktperson:</td>
                    <td>{{props.formData.ansprechpartner}}</td>
                </tr>

                <tr v-if="props.formData.email_2 !== ''">
                    <td>E-Mail-Adresse deiner Kontaktperson:</td>
                    <td>{{props.formData.email_2}}</td>
                </tr>

                <tr v-if="props.formData.telefon_2 !== ''">
                    <td>Telefonnummer deiner Kontaktperson:</td>
                    <td>{{props.formData.telefon_2}}</td>
                </tr>

                <tr>
                    <td>Teilnahmegruppe:</td>
                    <td>{{ participationGroup() }}</td>
                </tr>

                <tr>
                    <td>Foto-Erlaubnis:</td>
                    <td>
                        <strong>Social Media:</strong> {{props.formData.foto.socialmedia ? 'Ja' : 'Nein'}},
                        <strong>Printmedien:</strong> {{props.formData.foto.print ? 'Ja' : 'Nein'}},
                        <strong>Webseite:</strong> {{props.formData.foto.webseite ? 'Ja' : 'Nein'}},
                        <strong>Partnerorganisationen:</strong> {{props.formData.foto.partner ? 'Ja' : 'Nein'}},
                        <strong>Interne Zwecke:</strong> {{props.formData.foto.intern ? 'Ja' : 'Nein'}}


                    </td>
                </tr>

                <tr>
                    <td>Allergien:</td>
                    <td>{{props.formData.allergien}}</td>
                </tr>

                <tr>
                    <td>Lebensmittelunverträglichkeiten:</td>
                    <td>{{props.formData.intolerances}}</td>
                </tr>

                <tr>
                    <td>Ernährungsweise:</td>
                    <td>{{eatingHabit()}}</td>
                </tr>


                <tr><td>Veranstaltung:</td><td><strong>{{ event.name }}</strong></td></tr>
                <tr><td>Anreise:</td><td>{{ formatDate(formData.arrival) }}</td></tr>
                <tr><td>Abreise:</td><td>{{ formatDate(formData.departure) }}</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" />
                    Ich bestätige, dass alle Angaben korrekt sind.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.summary_accept_terms" />
                    Ich akzeptiere die Teilnahmebedingungen.
                </label>
                <label style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.legal_accepted" />
                    Ich stimme der Datenschutzerklärung zu.
                </label>
                <label v-if="requiresPaymentConfirmation" style="display: flex; gap: 10px; cursor: pointer;">
                    <input type="checkbox" v-model="formData.payment" />
                    {{ paymentConfirmationText }}
                </label>
            </div>

            <div class="btn-row">
                <button type="button" class="btn-secondary" @click="emit('back', backTarget)">← Zurück</button>
                <button
                    type="submit"
                    class="btn-primary"
                    :disabled="!canSubmit"
                    style="background: #059669;"
                >
                    {{ submitting ? 'Wird gesendet…' : 'Jetzt anmelden ✓' }}
                </button>
            </div>
        </div>
    </div>
</template>