feat: Mise en place des paiements en plusieurs fois (partie BACK) [#25]

Front-End/src/components/PaymentModeSelector.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import CheckBoxList from '@/components/CheckBoxList';
+import { CreditCard } from 'lucide-react';
+
+const paymentModes = [
+  { id: 1, name: 'Prélèvement SEPA' },
+  { id: 2, name: 'Virement' },
+  { id: 3, name: 'Chèque' },
+  { id: 4, name: 'Espèce' },
+];
+
+const PaymentModeSelector = ({ formData, setFormData, fieldName }) => {
+  const handleCheckboxChange = (event) => {
+    const value = parseInt(event.target.value, 10);
+    setFormData((prevFormData) => {
+      const selectedModes = prevFormData[fieldName] || [];
+      const newSelectedModes = selectedModes.includes(value)
+        ? selectedModes.filter((mode) => mode !== value)
+        : [...selectedModes, value];
+      return { ...prevFormData, [fieldName]: newSelectedModes };
+    });
+  };
+
+  return (
+    <div className="mb-4 w-full">
+      <div className="flex justify-center bg-gray p-4 rounded-lg shadow-md w-full">
+        <CreditCard className="w-6 h-6 text-emerald-500 mr-2" />
+        <h2 className="text-xl font-semibold">Mode de paiement</h2>
+        <CheckBoxList
+          items={paymentModes}
+          formData={formData}
+          handleChange={handleCheckboxChange}
+          fieldName={fieldName}
+          itemLabelFunc={(item) => (
+            <span className="text-sm font-medium">{item.name}</span>
+          )}
+          horizontal={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PaymentModeSelector;