Basic signup for events

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

@@ -0,0 +1,130 @@
+<script setup>
+import { watch } from "vue";
+
+const props = defineProps({ formData: Object, event: Object })
+const emit = defineEmits(['next', 'back'])
+
+watch(
+    () => props.formData.participationType,
+    (value) => {
+        if (!value) {
+            props.formData.beitrag = 'standard'
+            return
+        }
+
+        props.formData.beitrag = 'standard'
+    }
+)
+
+const nextStep = () => {
+    const hasAddons = (props.event.addons?.length ?? 0) > 0
+    emit('next', hasAddons ? 6 : 7)
+}
+</script>
+
+<template>
+    <div>
+        <h3 v-if="event.solidarityPayment">Solidarbeitrag – Teilnahmegruppe</h3>
+        <h3 v-else>Ich nehme teil als ...</h3>
+
+        <table style="width: 100%;">
+            <tr
+                v-for="participationType in props.event.participationTypes"
+                :key="participationType.type.slug"
+                style="vertical-align: top;"
+            >
+                <td style="width: 50px; padding-top: 6px;">
+                    <input
+                        :id="participationType.type.slug"
+                        v-model="props.formData.participationType"
+                        type="radio"
+                        :value="participationType.type.slug"
+                    />
+                </td>
+                <td style="padding-bottom: 16px;">
+                    <label :for="participationType.type.slug" style="line-height: 1.5; font-weight: 600; cursor: pointer;">
+                        {{ participationType.type.name }}
+                    </label><br />
+
+                    <label
+                        :for="participationType.type.slug"
+                        style="line-height: 1.5; padding-left: 15px; font-style: italic; color: #606060; cursor: pointer;"
+                    >
+                        {{ participationType.description }}
+                    </label>
+
+                    <div
+                        v-if="props.formData.participationType === participationType.type.slug"
+                        style="margin-top: 10px; margin-left: 15px; padding: 12px 14px; background: #f8fafc; border-left: 3px solid #2563eb; border-radius: 6px;"
+                    >
+                        <template
+                            v-if="participationType.amount_reduced !== null || participationType.amount_solidarity !== null"
+                        >
+                            <div style="margin-bottom: 8px; font-size: 0.95rem; font-weight: 600; color: #374151;">
+                                Beitrag auswählen
+                            </div>
+
+                            <label style="display: block; margin-bottom: 8px; cursor: pointer;">
+                                <input type="radio" v-model="props.formData.beitrag" value="standard" />
+                                Standardbeitrag
+                                <span style="color: #606060;">
+                                    ({{ participationType.amount_standard.readable }}
+                                    <template v-if="props.event.payPerDay">/ Tag</template>
+                                    <template v-else>Gesamt</template>)
+                                </span>
+                            </label>
+
+                            <label
+                                v-if="participationType.amount_reduced !== null"
+                                style="display: block; margin-bottom: 8px; cursor: pointer;"
+                            >
+                                <input type="radio" v-model="props.formData.beitrag" value="reduced" />
+                                Reduzierter Beitrag
+                                <span style="color: #606060;">
+                                    ({{ participationType.amount_reduced.readable }}
+                                    <template v-if="props.event.payPerDay">/ Tag</template>
+                                    <template v-else>Gesamt</template>)
+                                </span>
+                            </label>
+
+                            <label
+                                v-if="participationType.amount_solidarity !== null"
+                                style="display: block; margin-bottom: 0; cursor: pointer;"
+                            >
+                                <input type="radio" v-model="props.formData.beitrag" value="solidarity" />
+                                Solidaritätsbeitrag
+                                <span style="color: #606060;">
+                                    ({{ participationType.amount_solidarity.readable }}
+                                    <template v-if="props.event.payPerDay">/ Tag</template>
+                                    <template v-else>Gesamt</template>)
+                                </span>
+                            </label>
+                        </template>
+
+                        <template v-else>
+                            <div style="font-size: 0.9rem; color: #606060;">
+                                Standardbeitrag:
+                                <strong>{{ participationType.amount_standard.readable }}</strong>
+                                <template v-if="props.event.payPerDay">/ Tag</template>
+                                <template v-else>Gesamt</template>
+                            </div>
+                        </template>
+                    </div>
+                </td>
+            </tr>
+        </table>
+
+        <div class="btn-row">
+            <button type="button" class="btn-secondary" @click="emit('back', 3)">← Zurück</button>
+            <button
+                type="button"
+                v-if="props.formData.participationType"
+                class="btn-primary"
+                @click="nextStep"
+            >
+                Weiter →
+            </button>
+        </div>
+    </div>
+</template>
+