fix: Correction de l'affichage des numéros de téléphone [#41]

Front-End/src/components/InputPhone.js

@@ -1,40 +1,32 @@
-import { useEffect, useRef } from 'react';
-
-
-export default function InputPhone({ name, label, value, onChange, errorMsg, placeholder, className, required }) {
-    const inputRef = useRef(null);
-
-    useEffect(() => {
-        if (inputRef.current) {
-            inputRef.current.focus();
-        }
-    }, []);
-
-    const handleChange = (e) => {
-        const newValue = e.target.value;
-        onChange(newValue);
-    };
+import React from 'react';
+import { PhoneInput } from 'react-international-phone';
+import 'react-international-phone/style.css';
 
+export default function InputPhone({ name, label, value, onChange, errorMsg, className, required }) {
     return (
-        <>
-            <div className={`mb-4 ${className}`}>
-                <label htmlFor={name} className="block text-sm font-medium text-gray-700">
-                    {label}
-                    {required && <span className="text-red-500 ml-1">*</span>}
-                </label>
-                <div className={`mt-1 flex items-center border border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500`}>
-                    <input
-                        type="tel"
-                        name={name}
-                        ref={inputRef}
-                        className="flex-1 px-3 py-2 block w-full sm:text-sm focus:ring-0 rounded-md border-none outline-none"
-                        value={typeof value === 'string' ? value : ''}
-                        onChange={handleChange}
-                        placeholder={placeholder}
-                    />
-                </div>
-                {errorMsg && <p className="mt-2 text-sm text-red-600">{errorMsg}</p>}
-            </div>
-        </>
-    )
+        <div className={`${className}`}>
+            <label htmlFor={name} className="block text-sm font-medium text-gray-700">
+                {label}
+                {required && <span className="text-red-500 ml-1">*</span>}
+            </label>
+
+            <PhoneInput
+                defaultCountry="fr"
+                value={value}
+                onChange={(phone) => onChange(phone)}
+                inputProps={{
+                    name: name,
+                    required: required,
+                }}
+                className="!w-full mt-1 !h-[38px]"
+                containerClassName="!w-full !h-[36px] !flex !items-center  !rounded-md"
+                inputClassName={`flex-1 px-3 py-2 block w-full sm:text-sm border-none focus:ring-0 outline-none  !rounded-r-md !outline-none items-center !border !border-gray-200 rounded-md ${errorMsg ? 'border-red-500' : ''} hover:border-gray-400 focus-within:border-gray-500` }
+                buttonClassName="!h-[38px] !flex !items-center !justify-center !rounded-l-md !border border-gray-200 !border-r-0"
+            />
+
+            {errorMsg && (
+                <p className="mt-2 text-sm text-red-600">{errorMsg}</p>
+            )}
+        </div>
+    );
 }

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

@@ -10,6 +10,8 @@ import SectionTitle from '@/components/SectionTitle';
 import ProgressStep from '@/components/ProgressStep';
 import logger from '@/utils/logger';
 import Popup from '@/components/Popup';
+import InputPhone from '../InputPhone';
+import { PhoneLabel } from '../PhoneLabel';
 
 const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, registrationFees, tuitionFees, profiles, onSubmit, currentStep, groups, showOnlyStep2 = false }) => {
     const [formData, setFormData] = useState(() => {
@@ -66,7 +68,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
 
     const isStep1Valid = formData.studentLastName && formData.studentFirstName;
     const isStep2Valid = (
-                          formData.selectedGuardians.length > 0 || 
+                          formData.selectedGuardians.length > 0 ||
                           (!formData.emailError && formData.guardianEmail.length > 0 && filteredStudents.length === 0)
                         );
     const isStep3Valid = formData.selectedRegistrationFees?.length > 0;
@@ -127,7 +129,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
 
     const validateAndSubmit = async () => {
       const existingProfile = profiles.find(profile => profile.email === formData.guardianEmail);
-    
+
       if (existingProfile) {
         console.log('existingProfile : ', existingProfile);
         await setFormData((prevData) => ({
@@ -137,7 +139,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           existingProfileId: existingProfile.id,
         }));
       }
-    
+
       // Utiliser la dernière version de formData via formDataRef
       logger.debug('Submitting form data:', formDataRef.current);
       onSubmit(formDataRef.current);
@@ -146,7 +148,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
     const nextStep = async () => {
       if (step === 2) {
         const existingProfile = profiles.find(profile => profile.email === formData.guardianEmail);
-    
+
         if (existingProfile) {
           console.log('existingProfile : ', existingProfile);
           await setFormData((prevData) => ({
@@ -157,7 +159,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
           }));
         }
       }
-    
+
       if (!showOnlyStep2 && step < steps.length) {
         setStep(step + 1);
       }
@@ -184,16 +186,16 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
         const selectedGuardians = isSelected
           ? prevData.selectedGuardians.filter(id => id !== guardianId) // Retirer le guardian si déjà sélectionné
           : [...prevData.selectedGuardians, guardianId]; // Ajouter le guardian s'il n'est pas sélectionné
-    
+
         // Mettre à jour l'email uniquement si un guardian est sélectionné
         const updatedGuardianEmail = isSelected ? '' : guardianEmail;
-    
+
         // Si aucun guardian n'est sélectionné, réinitialiser le tableau des élèves
         if (selectedGuardians.length === 0) {
           setFilteredStudents(students); // Réafficher tous les élèves
           setSelectedEleve(null);
         }
-    
+
         return {
           ...prevData,
           selectedGuardians,
@@ -361,11 +363,9 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
               onChange={handleChange}
               className="w-full mt-4"
             />
-            <InputTextIcon
+            <InputPhone
               name="guardianPhone"
-              type="tel"
-              IconItem={Phone}
-              placeholder="Numéro de téléphone (optionnel)"
+              label={t('Numéro de téléphone (optionnel)')}
               value={formData.guardianPhone}
               onChange={handleChange}
               className="w-full mt-4"
@@ -385,7 +385,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                 setFormData((prevData) => ({
                   ...prevData,
                   guardianEmail: email,
-                  emailError: 
+                  emailError:
                     email.length > 0 && // Le champ de mail est non null
                     (!emailRegex.test(email) && filteredStudents.length === 0) // Format invalide ou aucun résultat
                       ? "Format d'email invalide ou aucun élève trouvé"
@@ -661,7 +661,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
                     <tbody>
                       <tr>
                         <td className="px-4 py-2 border">{formData.guardianEmail}</td>
-                        <td className="px-4 py-2 border">{formData.guardianPhone}</td>
+                        <td className="px-4 py-2 border"><PhoneLabel phoneNumber={formData.guardianPhone} /></td>
                       </tr>
                     </tbody>
                   </table>
@@ -781,7 +781,7 @@ const InscriptionForm = ( { students, registrationDiscounts, tuitionDiscounts, r
             </>
           )}
         </div>
-        
+
         <Popup
           visible={popupVisible}
           message={popupMessage}

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

@@ -2,8 +2,8 @@ import React from 'react';
 import SelectChoice from '@/components/SelectChoice';
 
 export default function PaymentMethodSelector({ formData, title, name, updateFormField, selected, paymentModes, paymentModesOptions, amount, getError }) {
-    console.log(paymentModes)
-    console.log(selected)
+    //console.log(paymentModes)
+    //console.log(selected)
     return (
         <div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
             {/* Titre */}

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

@@ -3,7 +3,6 @@ import InputPhone from '@/components/InputPhone';
 import Button from '@/components/Button';
 import React from 'react';
 import { useTranslations } from 'next-intl';
-import 'react-phone-number-input/style.css'
 import { Trash2, Plus } from 'lucide-react';
 
 export default function ResponsableInputFields({guardians, onGuardiansChange, addGuardian, deleteGuardian, errors = []}) {

Front-End/src/components/PhoneLabel.js

@@ -0,0 +1,7 @@
+import { formatPhoneNumber } from "@/utils/Telephone";
+
+export function PhoneLabel({phoneNumber}){
+    return (
+        <a className="text-sm font-semibold text-gray-800" href={"tel:"+phoneNumber}>{formatPhoneNumber(phoneNumber)}</a>
+    );
+}