Handling of event addons

2026-08-12 17:18:45 +02:00
parent 085299336e
commit 6e4e6b645c
74 changed files with 3072 additions and 95 deletions
@@ -6,6 +6,7 @@ import StepPersonalData from './steps/StepPersonalData.vue'
 import StepRegistrationMode from './steps/StepRegistrationMode.vue'
 import StepArrival from './steps/StepArrival.vue'
 import StepAddons from './steps/StepAddons.vue'
+import StepParticipationOptions from './steps/StepParticipationOptions.vue'
 import StepPhotoPermissions from './steps/StepPhotoPermissions.vue'
 import StepAllergies from './steps/StepAllergies.vue'
 import StepPaymentMethod from './steps/StepPaymentMethod.vue'
@@ -23,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 = [
@@ -33,10 +35,11 @@ const steps = [
    { step: 4, label: 'An-/Abreise' },
    { step: 5, label: 'Teilnahmegruppe' },
    { step: 6, label: 'Zusatzoptionen' },
-    { step: 7, label: 'Fotoerlaubnis' },
-    { step: 8, label: 'Allergien' },
-    {step: 9, label: 'Zahlungsart'},
-    {step: 10, label: 'Zusammenfassung'},
+    {step: 7, label: 'Teilnahmeoptionen'},
+    {step: 8, label: 'Fotoerlaubnis'},
+    {step: 9, label: 'Allergien'},
+    {step: 10, label: 'Zahlungsart'},
+    {step: 11, label: 'Zusammenfassung'},
 ]
 </script>

@@ -93,14 +96,20 @@ const steps = [
                <StepArrival        v-if="currentStep === 4" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                <StepRegistrationMode v-if="currentStep === 5" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
                <StepAddons         v-if="currentStep === 6" :formData="formData" :event="event" :selectedAddons="selectedAddons" @next="goToStep" @back="goToStep" />
-                <StepPhotoPermissions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
-                <StepAllergies      v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep" @back="goToStep" />
-                <StepPaymentMethod v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                <StepParticipationOptions v-if="currentStep === 7" :formData="formData" :event="event" @next="goToStep"
+                                          @back="goToStep"/>
+                <StepPhotoPermissions v-if="currentStep === 8" :formData="formData" :event="event" @next="goToStep"
+                                      @back="goToStep"/>
+                <StepAllergies v-if="currentStep === 9" :formData="formData" :event="event" @next="goToStep"
+                               @back="goToStep"/>
+                <StepPaymentMethod v-if="currentStep === 10" :formData="formData" :event="event" @next="goToStep"
                                   @back="goToStep"/>
                <StepSummary
-                    v-if="currentStep === 10"
+                    v-if="currentStep === 11"
                    :formData="formData"
                    :event="event"
+                    :summaryBaseAmount="summaryBaseAmount"
+                    :summaryAddonLines="summaryAddonLines"
                    :summaryAmount="summaryAmount"
                    :summaryAmountValue="summaryAmountValue"
                    :summaryLoading="summaryLoading"
@@ -0,0 +1,45 @@
+// Zentrale Schrittreihenfolge des Anmelde-Wizards. Einige Schritte sind optional und werden
+// übersprungen, wenn sie für das Event nicht zutreffen (Zusatzoptionen, Teilnahmeoptionen).
+// Der Zahlungsschritt wird separat in useSignupForm anhand des berechneten Betrags übersprungen.
+export const STEP_AGE = 1
+export const STEP_CONTACT = 2
+export const STEP_PERSONAL = 3
+export const STEP_ARRIVAL = 4
+export const STEP_REGISTRATION = 5
+export const STEP_ADDONS = 6
+export const STEP_PARTICIPATION_OPTIONS = 7
+export const STEP_PHOTO = 8
+export const STEP_ALLERGIES = 9
+export const STEP_PAYMENT = 10
+export const STEP_SUMMARY = 11
+
+// Ob ein (optionaler) Schritt für dieses Event angezeigt wird.
+export function stepVisible(event, step) {
+    if (step === STEP_ADDONS) {
+        return (event.addons?.length ?? 0) > 0
+    }
+
+    if (step === STEP_PARTICIPATION_OPTIONS) {
+        return (event.participationOptions?.length ?? 0) > 0
+    }
+
+    return true
+}
+
+// Nächster sichtbarer Schritt nach `step` (überspringt ausgeblendete optionale Schritte).
+export function nextVisibleFrom(event, step) {
+    let candidate = step + 1
+    while (candidate < STEP_SUMMARY && !stepVisible(event, candidate)) {
+        candidate++
+    }
+    return candidate
+}
+
+// Vorheriger sichtbarer Schritt vor `step`.
+export function prevVisibleFrom(event, step) {
+    let candidate = step - 1
+    while (candidate > STEP_AGE && !stepVisible(event, candidate)) {
+        candidate--
+    }
+    return candidate
+}
@@ -1,5 +1,6 @@
 import {reactive, ref} from 'vue'
 import axios from 'axios'
+import {STEP_PAYMENT, STEP_SUMMARY} from './stepFlow.js'

 export function useSignupForm(event, participantData) {
    const currentStep = ref(1)
@@ -16,6 +17,8 @@ export function useSignupForm(event, participantData) {
        eatingHabit: 'EATING_HABIT_VEGAN',
        paymentMethod: activeMethods.length === 1 ? activeMethods[0].slug : null,
        paymentOptions: {},
+        // Antworten auf die event-spezifischen Teilnahmeoptionen: { [question.key]: option.value }
+        participationOptions: {},
        userId: participantData.id,
        eventId: event.id,
        vorname: participantData.firstname ?? '',
@@ -57,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
@@ -74,15 +79,13 @@ 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
        }
    }

-    // Steps: ... 8 Allergien, 9 Zahlungsart, 10 Zusammenfassung.
-    const STEP_PAYMENT = 9
-    const STEP_SUMMARY = 10
-
    const goToStep = async (step) => {
        if (step === STEP_PAYMENT) {
            // Betrag ermitteln: Bei 0 € wird die Zahlungsart-Auswahl übersprungen.
@@ -129,6 +132,8 @@ export function useSignupForm(event, participantData) {
        submitResult,
        summaryLoading,
        summaryAmount,
-        summaryAmountValue
+        summaryAmountValue,
+        summaryBaseAmount,
+        summaryAddonLines
    }
 }
@@ -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>
@@ -43,8 +43,8 @@ const emit = defineEmits(['next', 'back'])
            </tr>
            <tr>
                <td colspan="2" class="btn-row">
-                    <button type="button" class="btn-secondary" @click="emit('back', 7)">← Zurück</button>
-                    <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
+                    <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
+                    <button type="button" class="btn-primary" @click="emit('next', 10)">Weiter →</button>
                </td>
            </tr>
        </table>
@@ -0,0 +1,62 @@
+<script setup>
+import {computed} from "vue";
+import {nextVisibleFrom, prevVisibleFrom, STEP_PARTICIPATION_OPTIONS} from "../composables/stepFlow.js";
+
+const props = defineProps({formData: Object, event: Object})
+const emit = defineEmits(['next', 'back'])
+
+const questions = computed(() => props.event.participationOptions ?? [])
+
+// Pflichtfeld: "Weiter" erst möglich, wenn jede Frage beantwortet ist.
+const canProceed = computed(() =>
+    questions.value.every(q => {
+        const value = props.formData.participationOptions[q.key]
+        return value !== undefined && value !== null && String(value).trim() !== ''
+    })
+)
+
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+const next = () => emit('next', nextVisibleFrom(props.event, STEP_PARTICIPATION_OPTIONS))
+</script>
+
+<template>
+    <div>
+        <h3>Teilnahmeoptionen</h3>
+        <p style="color: #6b7280; font-size: 0.95rem; margin-bottom: 20px;">
+            Bitte triff für jede Auswahl eine Entscheidung.
+        </p>
+
+        <table class="form-table">
+            <tr v-for="question in questions" :key="question.key">
+                <td>
+                    {{ question.title || question.label }}:
+                    <span v-if="question.title && question.label" class="option-hint">{{ question.label }}</span>
+                </td>
+                <td>
+                    <select v-model="formData.participationOptions[question.key]">
+                        <option value="">Bitte wählen</option>
+                        <option v-for="option in question.options" :key="option.value" :value="option.value">
+                            {{ option.label }}
+                        </option>
+                    </select>
+                </td>
+            </tr>
+        </table>
+
+        <div class="btn-row">
+            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="next">Weiter →</button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.option-hint {
+    display: block;
+    margin-top: 2px;
+    font-size: 0.8rem;
+    font-style: italic;
+    font-weight: 400;
+    color: #6b7280;
+}
+</style>
@@ -78,8 +78,8 @@ const canProceed = computed(() => {
        </div>

        <div class="btn-row">
-            <button type="button" class="btn-secondary" @click="emit('back', 8)">← Zurück</button>
-            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 10)">Weiter →
+            <button type="button" class="btn-secondary" @click="emit('back', 9)">← Zurück</button>
+            <button type="button" class="btn-primary" :disabled="!canProceed" @click="emit('next', 11)">Weiter →
            </button>
        </div>
    </div>
@@ -1,16 +1,15 @@
 <script setup>
+import {prevVisibleFrom, STEP_ALLERGIES, STEP_PHOTO} from "../composables/stepFlow.js";
+
 const props = defineProps({ formData: Object, event: Object })
 const emit = defineEmits(['next', 'back'])

 const acceptAll = () => {
    Object.keys(props.formData.foto).forEach(k => props.formData.foto[k] = true)
-    emit('next', 8)
+    emit('next', STEP_ALLERGIES)
 }

-const back = () => {
-    const hasAddons = (props.event.addons?.length > 0) || props.event.solidarityPayment
-    emit('back', hasAddons ? 6 : 5)
-}
+const back = () => emit('back', prevVisibleFrom(props.event, STEP_PHOTO))
 </script>

 <template>
@@ -27,7 +26,7 @@ const back = () => {
        <div class="btn-row">
            <button type="button" class="btn-secondary" @click="back">← Zurück</button>
            <button type="button" class="btn-primary" style="background: #059669;" @click="acceptAll">Alle akzeptieren & weiter</button>
-            <button type="button" class="btn-primary" @click="emit('next', 8)">Weiter →</button>
+            <button type="button" class="btn-primary" @click="emit('next', 9)">Weiter →</button>
        </div>
    </div>
 </template>
@@ -1,5 +1,6 @@
 <script setup>
-import { watch } from "vue";
+import {watch} from "vue";
+import {nextVisibleFrom, STEP_REGISTRATION} from "../composables/stepFlow.js";

 const props = defineProps({ formData: Object, event: Object })
 const emit = defineEmits(['next', 'back'])
@@ -17,8 +18,7 @@ watch(
 )

 const nextStep = () => {
-    const hasAddons = (props.event.addons?.length ?? 0) > 0
-    emit('next', hasAddons ? 6 : 7)
+    emit('next', nextVisibleFrom(props.event, STEP_REGISTRATION))
 }
 </script>

@@ -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>