Configurations for payment modules

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

@@ -22,6 +22,8 @@
     const contributingLocalGroups = ref([])
     const eatingHabits = ref([]);
     const paymentMethods = ref([]);
+    // pro-Event-Config je Zahlungsmethode: { slug: { option: value } }
+    const paymentMethodConfigurations = reactive({});
 
     const errors = reactive({})
 
@@ -49,6 +51,21 @@
         contributingLocalGroups.value = props.event.contributingLocalGroups?.map(t => t.id) ?? []
         eatingHabits.value = props.event.eatingHabits?.map(t => t.id) ?? []
         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 dynmicProps.paymentMethods ?? []) {
+            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
+        }
     });
 
     async function save() {
@@ -80,6 +97,7 @@
                 contributingLocalGroups: contributingLocalGroups.value,
                 eatingHabits: eatingHabits.value,
                 paymentMethods: paymentMethods.value,
+                paymentMethodConfigurations: paymentMethodConfigurations,
             }
         })
 
@@ -220,6 +238,16 @@
                         <td>
                             <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>
+
+                            <div
+                                v-if="paymentMethods.includes(paymentMethod.slug) && (paymentMethod.optionsSchema?.length ?? 0) > 0"
+                                class="payment-method-config"
+                            >
+                                <div v-for="option in paymentMethod.optionsSchema" :key="option.name" class="payment-method-config-row">
+                                    <label>{{ option.label }}<span v-if="option.required" class="required-marker">*</span></label>
+                                    <input type="text" v-model="paymentMethodConfigurations[paymentMethod.slug][option.name]" class="width-full" />
+                                </div>
+                            </div>
                         </td>
                     </tr>
                 </table>
@@ -278,4 +306,26 @@
         width: 250px;
     }
 
+    .payment-method-config {
+        margin: 6px 0 12px 24px;
+        padding-left: 10px;
+        border-left: 2px solid #d1d5db;
+    }
+
+    .payment-method-config-row {
+        margin-bottom: 6px;
+    }
+
+    .payment-method-config-row label {
+        display: block;
+        font-size: 0.85rem;
+        color: #374151;
+        margin-bottom: 2px;
+    }
+
+    .required-marker {
+        color: #ef4444;
+        margin-left: 2px;
+    }
+
 </style>