Icons for payment methods

app/Domains/Event/Views/Partials/ParticipationFees.vue

@@ -1,16 +1,59 @@
 <script setup>
-    import {reactive, watch} from "vue";
-    import AmountInput from "../../../../Views/Components/AmountInput.vue";
-    import ErrorText from "../../../../Views/Components/ErrorText.vue";
-    import {toast} from "vue3-toastify";
-    import {request} from "../../../../../resources/js/components/HttpClient.js";
+import {onMounted, reactive, ref} from "vue";
+import AmountInput from "../../../../Views/Components/AmountInput.vue";
+import ErrorText from "../../../../Views/Components/ErrorText.vue";
+import TextEditor from "../../../../Views/Components/TextEditor.vue";
+import Modal from "../../../../Views/Components/Modal.vue";
+import RichSelectBox from "../../../../Views/Components/RichSelectBox.vue";
+import {PAYMENT_METHOD_ICONS} from "../../../../../resources/js/constants/paymentMethodIcons.js";
+import {toast} from "vue3-toastify";
+import {request} from "../../../../../resources/js/components/HttpClient.js";
 
-    const emit = defineEmits(['close'])
+const emit = defineEmits(['close'])
 
     const props = defineProps({
         event: Object,
     })
 
+// Verfügbare (aktive) Zahlungsarten des Tenants inkl. optionsSchema + Default-Config.
+const availablePaymentMethods = ref([])
+// Auswahl der Zahlungsart-Slugs für dieses Event (Default: leer bei neuen Events).
+const paymentMethods = ref([])
+// pro-Event-Config je Zahlungsmethode: { slug: { option: value } }
+const paymentMethodConfigurations = reactive({})
+
+// Optionen-Modal
+const showOptionsModal = ref(false)
+const optionsMethod = ref(null)
+
+function openOptions(method) {
+    optionsMethod.value = method
+    showOptionsModal.value = true
+}
+
+onMounted(async () => {
+    const response = await fetch('/api/v1/core/retrieve-event-setting-data');
+    const data = await response.json();
+    availablePaymentMethods.value = data.paymentMethods ?? []
+
+    paymentMethods.value = props.event.paymentMethods?.map(t => t.slug) ?? []
+
+    // Pro-Event-Config vorbelegen: bereits gespeicherte Pivot-Config des Events hat Vorrang,
+    // sonst der Tenant-Standard (Snapshot-Quelle für neu zugewiesene Methoden).
+    const eventConfigBySlug = {}
+    for (const pm of props.event.paymentMethods ?? []) {
+        eventConfigBySlug[pm.slug] = pm.configuration ?? {}
+    }
+    for (const method of availablePaymentMethods.value) {
+        const source = eventConfigBySlug[method.slug] ?? method.configuration ?? {}
+        const config = {}
+        for (const option of method.optionsSchema ?? []) {
+            config[option.name] = source[option.name] ?? ''
+        }
+        paymentMethodConfigurations[method.slug] = config
+    }
+})
+
     const errors = reactive({})
     const formData = reactive({
         "pft_1_active": true,
@@ -75,6 +118,24 @@
             return;
         }
 
+        if (paymentMethods.value.length === 0) {
+            toast.error('Mindestens eine Zahlungsmöglichkeit muss ausgewählt sein.')
+            return;
+        }
+
+        const paymentResponse = await request('/api/v1/event/details/' + props.event.id + '/payment-methods', {
+            method: "POST",
+            body: {
+                paymentMethods: paymentMethods.value,
+                paymentMethodConfigurations: paymentMethodConfigurations,
+            }
+        })
+
+        if (paymentResponse.status !== 'success') {
+            toast.error(paymentResponse.message ?? 'Die Zahlungsmöglichkeiten konnten nicht gespeichert werden.')
+            return;
+        }
+
         const data = await request('/api/v1/event/details/' + props.event.id + '/participation-fees', {
             method: "POST",
             body: {
@@ -286,10 +347,73 @@
             </td>
         </tr>
 
+        <tr>
+            <td colspan="4" style="padding-top: 30px;">
+                <h4>Zahlungsmöglichkeiten</h4>
+                <div v-for="paymentMethod in availablePaymentMethods" :key="paymentMethod.slug"
+                     class="payment-method-row">
+                    <input type="checkbox" :id="'paymentmethod' + paymentMethod.id" :value="paymentMethod.slug"
+                           v-model="paymentMethods"/>
+                    <label style="padding-left: 5px;" :for="'paymentmethod' + paymentMethod.id">{{
+                            paymentMethod.name
+                        }}</label>
+                    <label
+                        v-if="paymentMethods.includes(paymentMethod.slug) && (paymentMethod.optionsSchema?.length ?? 0) > 0"
+                        class="link"
+                        style="padding-left: 15px; font-size: 10pt;"
+                        @click="openOptions(paymentMethod)"
+                    >Optionen</label>
+                </div>
+            </td>
+        </tr>
+
         <tr>
             <td colspan="4" style="padding-top: 20px;">
                 <input type="button" value="Speichern" @click="saveParticipationFees" />
             </td>
         </tr>
     </table>
+
+    <Modal
+        v-if="showOptionsModal"
+        :show="showOptionsModal"
+        :title="'Optionen: ' + (optionsMethod?.name ?? '')"
+        width="700px"
+        @close="showOptionsModal = false"
+    >
+        <div v-for="option in optionsMethod?.optionsSchema ?? []" :key="option.name" class="payment-method-config-row">
+            <label>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></label>
+            <RichSelectBox v-if="option.type === 'icon'"
+                           v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"
+                           :options="PAYMENT_METHOD_ICONS"
+                           placeholder="Symbol wählen…"/>
+            <TextEditor v-else-if="option.type === 'richtext'"
+                        v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"/>
+            <input v-else type="text"
+                   v-model="paymentMethodConfigurations[optionsMethod.slug][option.name]"
+                   class="width-full"/>
+        </div>
+    </Modal>
 </template>
+
+<style scoped>
+.payment-method-row {
+    margin-bottom: 6px;
+}
+
+.payment-method-config-row {
+    margin-bottom: 12px;
+}
+
+.payment-method-config-row label {
+    display: block;
+    font-size: 0.85rem;
+    color: #374151;
+    margin-bottom: 2px;
+}
+
+.required-marker {
+    color: #ef4444;
+    margin-left: 2px;
+}
+</style>