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>
   );

Front-End/src/components/Structure/Tarification/FeesManagement.js

@@ -3,7 +3,7 @@ import FeesSection from '@/components/Structure/Tarification/FeesSection';
 import DiscountsSection from '@/components/Structure/Tarification/DiscountsSection';
 import PaymentPlanSelector from '@/components/PaymentPlanSelector';
 import PaymentModeSelector from '@/components/PaymentModeSelector';
-import { BE_SCHOOL_FEE_URL, BE_SCHOOL_DISCOUNT_URL, BE_SCHOOL_PAYMENT_PLAN_URL } from '@/utils/Url';
+import { BE_SCHOOL_FEE_URL, BE_SCHOOL_DISCOUNT_URL, BE_SCHOOL_PAYMENT_PLAN_URL, BE_SCHOOL_PAYMENT_MODE_URL } from '@/utils/Url';
 import { set } from 'lodash';
 
 const FeesManagement = ({ registrationDiscounts, 
@@ -18,6 +18,10 @@ const FeesManagement = ({ registrationDiscounts,
                           setRegistrationPaymentPlans,
                           tuitionPaymentPlans,
                           setTuitionPaymentPlans,
+                          registrationPaymentModes,
+                          setRegistrationPaymentModes,
+                          tuitionPaymentModes,
+                          setTuitionPaymentModes,
                           handleCreate, 
                           handleEdit, 
                           handleDelete }) => {
@@ -75,13 +79,14 @@ const FeesManagement = ({ registrationDiscounts,
               type={0}
             />
           </div>
-          {/* <div className="col-span-1">
+          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
             <PaymentModeSelector
-              formData={formRegistrationData}
-              setFormData={setFormRegistrationData}
-              fieldName="paymentRegistrationMode"
+              paymentModes={registrationPaymentModes}
+              setPaymentModes={setRegistrationPaymentModes}
+              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_MODE_URL}`, id, updatedData, setRegistrationPaymentModes)}
+              type={0}
             />
-          </div> */}
+          </div>
         </div>
       </div>
       <div className="bg-white p-2 rounded-lg shadow-md">
@@ -117,6 +122,14 @@ const FeesManagement = ({ registrationDiscounts,
               type={1}
             />
           </div>
+          <div className="col-span-1 p-6 rounded-lg shadow-inner mt-4">
+            <PaymentModeSelector
+              paymentModes={tuitionPaymentModes}
+              setPaymentModes={setTuitionPaymentModes}
+              handleEdit={(id, updatedData) => handleEdit(`${BE_SCHOOL_PAYMENT_MODE_URL}`, id, updatedData, setTuitionPaymentModes)}
+              type={1}
+            />
+          </div>
         </div>
       </div>
     </div>