feat: Ajout de la sélection des modes de paiements / refactoring de

l'automate

Front-End/src/components/Inscription/PaymentMethodSelector.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import SelectChoice from '@/components/SelectChoice';
+
+export default function PaymentMethodSelector({ formData, title, name, updateFormField, selected, paymentModes, paymentModesOptions, amount, getError }) {
+    console.log(paymentModes)
+    console.log(selected)
+    return (
+        <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
+            {/* Titre */}
+            <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">{title}</h2>
+
+            {/* Section d'information */}
+            <div className="mb-6 bg-gray-50 p-4 rounded-lg border border-gray-100">
+                <p className="text-gray-700 text-sm mb-2">
+                    <strong className="text-gray-900">Montant :</strong> {amount} €
+                </p>
+            </div>
+
+            <SelectChoice
+                name={name}
+                label="Mode de Paiement"
+                placeHolder="Sélectionner un mode de paiement"
+                selected={selected || ''}
+                callback={(e) => updateFormField(name, e.target.value)}
+                choices={paymentModes.map((mode) => ({
+                    value: mode.mode,
+                    label: paymentModesOptions.find(option => option.id === mode.mode)?.name || 'Mode inconnu'
+                }))}
+                required
+                errorMsg={getError('payment_method')}
+            />
+        </div>
+    );
+}