feat: Ajout des modes de paiements + création d'une commande dans le

back permettant d'initialiser des données de test (pour les tarifs)

Front-End/src/components/PaymentModeSelector.js

@@ -1,41 +1,59 @@
-import React from 'react';
-import CheckBoxList from '@/components/CheckBoxList';
-import { CreditCard } from 'lucide-react';
+import React, { useEffect, useState } from 'react';
+import { DollarSign } from 'lucide-react';
 
-const paymentModes = [
+const paymentModesOptions = [
   { 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 };
+const PaymentModeSelector = ({ paymentModes, setPaymentModes, handleEdit, type }) => {
+  const [activePaymentModes, setActivePaymentModes] = useState([]);
+
+  useEffect(() => {
+    // Initialiser activePaymentModes avec les modes dont is_active est à true
+    const activeModes = paymentModes.filter(mode => mode.is_active).map(mode => mode.mode);
+    setActivePaymentModes(activeModes);
+  }, [paymentModes]);
+
+  const handleModeToggle = (modeId) => {
+    setActivePaymentModes((prevActiveModes) => {
+      const newActiveModes = prevActiveModes.includes(modeId)
+        ? prevActiveModes.filter((mode) => mode !== modeId)
+        : [...prevActiveModes, modeId];
+
+      // Mettre à jour le mode de paiement dans le backend
+      const updatedMode = paymentModes.find(mode => mode.mode === modeId);
+      if (updatedMode) {
+        handleEdit(updatedMode.id, { ...updatedMode, is_active: !updatedMode.is_active });
+      }
+
+      return newActiveModes;
     });
   };
 
   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 className="space-y-4">
+      <div className="flex items-center mb-4">
+        <DollarSign className="w-6 h-6 text-emerald-500 mr-2" />
+        <h2 className="text-xl font-semibold">Modes de paiement</h2>
+      </div>
+      <div className="grid grid-cols-2 gap-4 mt-4">
+        {paymentModesOptions.map((mode) => (
+          <button
+            key={mode.id}
+            type="button"
+            onClick={() => handleModeToggle(mode.id)}
+            className={`p-4 rounded-lg shadow-md text-center text-gray-700' ${
+              activePaymentModes.includes(mode.id)
+                ? 'bg-emerald-300'
+                : 'bg-white'
+            } hover:bg-emerald-200`}
+          >
+            {mode.name}
+          </button>
+        ))}
       </div>
     </div>
   );