refactor: Changement des IconTextInput en TextInput, modification du composant step

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

@@ -6,8 +6,8 @@ import Button from '@/components/Button';
 import Table from '@/components/Table';
 import FeesSection from '@/components/Structure/Tarification/FeesSection';
 import DiscountsSection from '@/components/Structure/Tarification/DiscountsSection';
-import Navigation from '@/components/Navigation';
-import StepTitle from '@/components/StepTitle';
+import SectionTitle from '@/components/SectionTitle';
+import ProgressStep from '@/components/ProgressStep';
 
 const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, registrationFees, tuitionFees, onSubmit, currentStep }) => {
     const [formData, setFormData] = useState({
@@ -37,8 +37,8 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
         4: 'Frais de scolarité',
         5: 'Récapitulatif'
       };
-      
-    const steps = ['1', '2', '3', '4', 'Récap'];
+
+    const steps = ['Élève', 'Responsable', 'Inscription', 'Scolarité', 'Récap'];
 
     const isStep1Valid = formData.studentLastName && formData.studentFirstName;
     const isStep2Valid = (
@@ -136,7 +136,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           return { ...prevData, selectedRegistrationFees };
         });
     };
-    
+
     const handleTuitionFeeSelection = (feeId) => {
         setFormData((prevData) => {
             const selectedTuitionFees = prevData.selectedTuitionFees.includes(feeId)
@@ -147,7 +147,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
             return { ...prevData, selectedTuitionFees };
         });
     };
-      
+
     const handleRegistrationDiscountSelection = (discountId) => {
         setFormData((prevData) => {
           const selectedRegistrationDiscounts = prevData.selectedRegistrationDiscounts.includes(discountId)
@@ -169,7 +169,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           return { ...prevData, selectedTuitionDiscounts };
         });
     };
-    
+
     const calculateFinalRegistrationAmount = (selectedRegistrationFees, selectedRegistrationDiscounts) => {
         const totalFees = selectedRegistrationFees.reduce((sum, feeId) => {
           const fee = registrationFees.find(f => f.id === feeId);
@@ -178,7 +178,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           }
           return sum;
         }, 0);
-      
+
         const totalDiscounts = selectedRegistrationDiscounts.reduce((sum, discountId) => {
           const discount = registrationDiscounts.find(d => d.id === discountId);
           if (discount) {
@@ -190,9 +190,9 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           }
           return sum;
         }, 0);
-      
+
         const finalAmount = totalFees - totalDiscounts;
-      
+
         return finalAmount.toFixed(2);
     };
 
@@ -204,7 +204,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           }
           return sum;
         }, 0);
-      
+
         const totalDiscounts = selectedTuitionDiscounts.reduce((sum, discountId) => {
           const discount = tuitionDiscounts.find(d => d.id === discountId);
           if (discount) {
@@ -216,20 +216,20 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           }
           return sum;
         }, 0);
-      
+
         const finalAmount = totalFees - totalDiscounts;
-      
+
         return finalAmount.toFixed(2);
     };
 
     return (
       <div className="space-y-4 mt-6">
-        <Navigation
+        <ProgressStep
           steps={steps}
-          step={step}
+          stepTitles={stepTitles}
+          currentStep={step}
           setStep={setStep}
           isStepValid={isStepValid}
-          stepTitles={stepTitles}
         />
 
         {step === 1 && (
@@ -257,15 +257,6 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
 
         {step === 2 && (
           <div className="mt-6">
-            <InputTextIcon
-                name="guardianPhone"
-                type="tel"
-                IconItem={Phone}
-                placeholder="Numéro de téléphone (optionnel)"
-                value={formData.guardianPhone}
-                onChange={handleChange}
-                className="w-full mt-4"
-            />
             <div className="flex flex-col space-y-4 mt-6">
               <label className="flex items-center space-x-3">
                 <input
@@ -291,6 +282,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
               </label>
             </div>
             {formData.responsableType === 'new' && (
+              <>
               <InputTextIcon
                   name="guardianEmail"
                   type="email"
@@ -300,6 +292,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                   onChange={handleChange}
                   className="w-full mt-4"
               />
+              <InputTextIcon
+                name="guardianPhone"
+                type="tel"
+                IconItem={Phone}
+                placeholder="Numéro de téléphone (optionnel)"
+                value={formData.guardianPhone}
+                onChange={handleChange}
+                className="w-full mt-4"
+            />
+              </>
             )}
 
             {formData.responsableType === 'existing' && (
@@ -364,7 +366,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                       handleFeeSelection={handleRegistrationFeeSelection}
                   />
                 </div>
-                <StepTitle title='Réductions' />
+                <SectionTitle title='Réductions' />
                 <div className="mb-4">
                   {registrationDiscounts.length > 0 ? (
                     <DiscountsSection
@@ -381,16 +383,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                     </p>
                   )}
                 </div>
-                <StepTitle title='Montant total' />
+                <SectionTitle title='Montant total' />
                 <Table
                   data={[ {id: 1}]}
                   columns={[
                       {
-                          name: 'LIBELLE', 
+                          name: 'LIBELLE',
                           transform: () => <span>MONTANT TOTAL</span>
                       },
                       {
-                          name: 'TOTAL', 
+                          name: 'TOTAL',
                           transform: () => <b>{totalRegistrationAmount} €</b>
                       }
                   ]}
@@ -403,7 +405,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                     <span className="block sm:inline"> Aucun frais d'inscription n'a été créé.</span>
                 </p>
             )}
-          </div>                
+          </div>
         )}
 
         {step === 4 && (
@@ -419,7 +421,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                       handleFeeSelection={handleTuitionFeeSelection}
                   />
                 </div>
-                <StepTitle title='Réductions' />
+                <SectionTitle title='Réductions' />
                 <div className="mb-4">
                   {tuitionDiscounts.length > 0 ? (
                     <DiscountsSection
@@ -436,16 +438,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                     </p>
                   )}
                 </div>
-                <StepTitle title='Montant total' />
+                <SectionTitle title='Montant total' />
                 <Table
                   data={[ {id: 1}]}
                   columns={[
                       {
-                          name: 'LIBELLE', 
+                          name: 'LIBELLE',
                           transform: () => <span>MONTANT TOTAL</span>
                       },
                       {
-                          name: 'TOTAL', 
+                          name: 'TOTAL',
                           transform: () => <b>{totalTuitionAmount} €</b>
                       }
                   ]}

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

@@ -39,7 +39,18 @@ export default function InscriptionFormShared({
 }) {
     // États pour gérer les données du formulaire
     const [isLoading, setIsLoading] = useState(true);
-    const [formData, setFormData] = useState({});
+    const [formData, setFormData] = useState({
+        id: '',
+        last_name: '',
+        first_name: '',
+        address: '',
+        birth_date: '',
+        birth_place: '',
+        birth_postal_code: '',
+        nationality: '',
+        attending_physician: '',
+        level: ''
+    });
 
     const [guardians, setGuardians] = useState([]);