acasini/n3wt-school
1
0
Fork 0
mirror of https://git.v0id.ovh/n3wt-innov/n3wt-school.git synced 2026-01-29 07:53:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Ordonnancement de l'inscription sur plusieurs pages + contrôle des

Browse Source 
champs remplis dans le formulaire
This commit is contained in:
N3WT DE COMPET
2025-04-26 16:43:25 +02:00
parent 1617b132c4
commit daad12cf40
5 changed files with 437 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
Front-End/src/components/Inscription/PaymentMethodSelector.js
View File

@ -1,48 +1,108 @@
import React from 'react';
import React, { useEffect } from 'react';
import SelectChoice from '@/components/SelectChoice';
export default function PaymentMethodSelector({
formData,
title,
name,
updateFormField,
selected,
paymentModes,
paymentModesOptions,
amount,
getError,
setFormData,
registrationPaymentModes,
tuitionPaymentModes,
errors,
setIsPageValid
}) {
//console.log(paymentModes)
//console.log(selected)
return (
<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">
{title}
</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> {amount} €
</p>
useEffect(() => {
const isValid = !Object.keys(formData).some((field) => getLocalError(field) !== '');
console.log(isValid)
setIsPageValid(isValid);
}, [formData, setIsPageValid]);
const paymentModesOptions = [
{ id: 1, name: 'Prélèvement SEPA' },
{ id: 2, name: 'Virement' },
{ id: 3, name: 'Chèque' },
{ id: 4, name: 'Espèce' },
];
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() === '') )
) {
return 'Champs requis';
}
return '';
};
const onChange = (field, value) => {
setFormData((prev) => ({ ...prev, [field]: value }));
};
return (
<>
<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> {formData.totalRegistrationFees} €
</p>
</div>
<SelectChoice
name="registration_payment"
label="Mode de Paiement"
placeHolder="Sélectionner un mode de paiement"
selected={formData.registration_payment}
callback={(e) => onChange("registration_payment", e.target.value)}
choices={registrationPaymentModes.map((mode) => ({
value: mode.mode,
label:
paymentModesOptions.find((option) => option.id === mode.mode)
?.name || 'Mode inconnu',
}))}
required
errorMsg={getError("registration_payment") || getLocalError("registration_payment")}
/>
</div>
<SelectChoice
name={name}
label="Mode de Paiement"
placeHolder="Sélectionner un mode de paiement"
selected={selected || ''}
callback={(e) => updateFormField(name, e.target.value)}
choices={paymentModes.map((mode) => ({
value: mode.mode,
label:
paymentModesOptions.find((option) => option.id === mode.mode)
?.name || 'Mode inconnu',
}))}
required
errorMsg={getError('payment_method')}
/>
</div>
<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> {formData.totalTuitionFees} €
</p>
</div>
<SelectChoice
name="tuition_payment"
label="Mode de Paiement"
placeHolder="Sélectionner un mode de paiement"
selected={formData.tuition_payment}
callback={(e) => onChange("tuition_payment", e.target.value)}
choices={tuitionPaymentModes.map((mode) => ({
value: mode.mode,
label:
paymentModesOptions.find((option) => option.id === mode.mode)
?.name || 'Mode inconnu',
}))}
required
errorMsg={getError("tuition_payment") || getLocalError("tuition_payment")}
/>
</div>
</>
);
}