feat: Ajout des payementPlans dans le formulaire / ajout de la photo

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

@@ -1,11 +1,14 @@
 import React, { useEffect } from 'react';
 import SelectChoice from '@/components/SelectChoice';
+import RadioList from '@/components/RadioList';
 
 export default function PaymentMethodSelector({
   formData,
   setFormData,
   registrationPaymentModes,
   tuitionPaymentModes,
+  registrationPaymentPlans,
+  tuitionPaymentPlans,
   errors,
   setIsPageValid,
 }) {
@@ -14,6 +17,7 @@ export default function PaymentMethodSelector({
       (field) => getLocalError(field) !== ''
     );
     setIsPageValid(isValid);
+    console.log('formdata : ', formData);
   }, [formData, setIsPageValid]);
 
   const paymentModesOptions = [
@@ -23,19 +27,31 @@ export default function PaymentMethodSelector({
     { id: 4, name: 'Espèce' },
   ];
 
+  const paymentPlansOptions = [
+    { id: 1, name: '1 fois' },
+    { id: 3, name: '3 fois' },
+    { id: 10, name: '10 fois' },
+    { id: 12, name: '12 fois' },
+  ];
+
   const getError = (field) => {
     return errors?.student?.[field]?.[0];
   };
 
   const getLocalError = (field) => {
     if (
-      // Student Form
       (field === 'registration_payment' &&
         (!formData.registration_payment ||
           String(formData.registration_payment).trim() === '')) ||
       (field === 'tuition_payment' &&
         (!formData.tuition_payment ||
-          String(formData.tuition_payment).trim() === ''))
+          String(formData.tuition_payment).trim() === '')) ||
+      (field === 'registration_payment_plan' &&
+        (!formData.registration_payment_plan ||
+          String(formData.registration_payment_plan).trim() === '')) ||
+      (field === 'tuition_payment_plan' &&
+        (!formData.tuition_payment_plan ||
+          String(formData.tuition_payment_plan).trim() === ''))
     ) {
       return 'Champs requis';
     }
@@ -48,13 +64,12 @@ export default function PaymentMethodSelector({
 
   return (
     <>
+      {/* Frais d'inscription */}
       <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">
           Frais d'inscription
         </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>{' '}
@@ -80,15 +95,42 @@ export default function PaymentMethodSelector({
             getLocalError('registration_payment')
           }
         />
+
+        <RadioList
+          sectionLabel="Choisissez une option"
+          required
+          items={paymentPlansOptions
+            .filter((option) =>
+              registrationPaymentPlans.some(
+                (plan) => plan.frequency === option.id
+              )
+            )
+            .map((option) => ({
+              id: option.id,
+              label: option.name,
+            }))}
+          formData={{
+            ...formData,
+            registration_payment_plan: parseInt(
+              formData.registration_payment_plan,
+              10
+            ), // S'assurer que la valeur est un entier
+          }}
+          handleChange={(e) => {
+            const value = parseInt(e.target.value, 10);
+            onChange('registration_payment_plan', value); // Convertir la valeur en entier
+          }}
+          fieldName="registration_payment_plan"
+          className="mt-4"
+        />
       </div>
 
+      {/* Frais de scolarité */}
       <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 mt-12">
-        {/* Titre */}
         <h2 className="text-2xl font-semibold mb-6 text-gray-800 border-b pb-2">
           Frais de scolarité
         </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>{' '}
@@ -113,6 +155,26 @@ export default function PaymentMethodSelector({
             getError('tuition_payment') || getLocalError('tuition_payment')
           }
         />
+
+        <RadioList
+          sectionLabel="Choisissez une option"
+          items={paymentPlansOptions
+            .filter((option) =>
+              tuitionPaymentPlans.some((plan) => plan.frequency === option.id)
+            )
+            .map((option) => ({
+              id: option.id,
+              label: option.name,
+            }))}
+          formData={formData}
+          handleChange={(e) => onChange('tuition_payment_plan', e.target.value)}
+          fieldName="tuition_payment_plan"
+          className="mt-4"
+          errorMsg={
+            getError('tuition_payment_plan') ||
+            getLocalError('tuition_payment_plan')
+          }
+        />
       </div>
     </>
   );