feat: Ajout d'un nouveau status avec envoi de mandat SEPA + envoi de

mail
2026-01-28 23:43:22 +00:00 · 2025-04-11 20:02:03 +02:00
parent 4f774c18e4
commit 4c2e2f8756
17 changed files with 415 additions and 81 deletions
--- a/Front-End/src/components/Inscription/ValidateSubscription.js
+++ b/Front-End/src/components/Inscription/ValidateSubscription.js
@ -0,0 +1,175 @@
+'use client'
+import React, { useState, useEffect } from 'react';
+import { DocusealBuilder } from '@docuseal/react';
+import Button from '@/components/Button';
+import { BASE_URL } from '@/utils/Url';
+import { generateToken } from '@/app/actions/registerFileGroupAction';
+import logger from '@/utils/logger';
+import { GraduationCap, CloudUpload } from 'lucide-react';
+
+export default function ValidateSubscription({ studentId, firstName, lastName, paymentMode, file, onAccept }) {
+  const [token, setToken] = useState(null);
+  const [uploadedFileName, setUploadedFileName] = useState('');
+  const [pdfUrl, setPdfUrl] = useState(`${BASE_URL}/${file}`);
+  const [isSepa, setIsSepa] = useState(paymentMode === '1'); // Vérifie si le mode de paiement est SEPA
+  const [currentPage, setCurrentPage] = useState(1); // Gestion des pages
+
+  useEffect(() => {
+    if (isSepa) {
+      generateToken('n3wt.school@gmail.com')
+        .then((data) => {
+          setToken(data.token);
+        })
+        .catch((error) => logger.error('Erreur lors de la génération du token:', error));
+    }
+  }, [isSepa]);
+
+  const handleUpload = (detail) => {
+    logger.debug('Uploaded file detail:', detail);
+    setUploadedFileName(detail.name);
+  };
+
+  const handleAccept = () => {
+    const fileInput = document.getElementById('fileInput'); // Récupère l'élément input
+    const file = fileInput?.files[0]; // Récupère le fichier sélectionné
+  
+    if (!file) {
+      logger.error('Aucun fichier sélectionné pour le champ SEPA.');
+      return;
+    }
+  
+    const data = {
+      status: 7, 
+      sepa_file: file,
+    };
+  
+    // Appeler la fonction passée par le parent pour mettre à jour le RF
+    onAccept(data);
+  };
+
+  const handleRefuse = () => {
+    logger.debug('Dossier refusé pour l\'étudiant:', studentId);
+    // Logique pour refuser l'inscription
+  };
+
+  const isValidateButtonDisabled = isSepa && !uploadedFileName;
+
+  const goToNextPage = () => {
+    if (currentPage < (isSepa ? 2 : 1)) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const goToPreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  return (
+    <div className="p-8 space-y-6 bg-gray-50 rounded-lg shadow-lg">
+      {/* Titre */}
+      <div className="flex items-center space-x-4">
+        <div className="bg-emerald-100 p-3 rounded-full shadow-md">
+          <GraduationCap className="w-8 h-8 text-emerald-600" />
+        </div>
+        <div>
+          <h1 className="text-3xl font-bold text-gray-800">
+            Dossier scolaire de <span className="text-emerald-600">{firstName} {lastName}</span>
+          </h1>
+          <p className="text-sm text-gray-500 italic">
+            Année scolaire {new Date().getFullYear()}-{new Date().getFullYear() + 1}
+          </p>
+        </div>
+      </div>
+
+      {/* Contenu principal */}
+      {currentPage === 1 && (
+        <div className="border p-6 rounded-lg shadow-md bg-white flex justify-center items-center">
+          <iframe
+            src={pdfUrl}
+            title="Aperçu du PDF"
+            className="w-full h-[900px] border rounded-lg"
+            style={{
+              transform: 'scale(0.95)', // Dézoom léger pour une meilleure vue
+              transformOrigin: 'top center',
+              border: 'none',
+            }}
+          />
+        </div>
+      )}
+
+      {currentPage === 2 && isSepa && (
+        <div className="border p-4 rounded-md shadow-md">
+          <h3 className="text-lg font-semibold mb-4">Sélection du mandat de pélèvement SEPA</h3>
+          <div
+  className="border-2 border-dashed border-gray-500 p-6 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-emerald-500"
+  onClick={() => document.getElementById('fileInput').click()} // Ouvre l'explorateur de fichiers au clic
+  onDragOver={(e) => e.preventDefault()}
+  onDrop={(e) => {
+    e.preventDefault();
+    const file = e.dataTransfer.files[0];
+    if (file) {
+      setUploadedFileName(file.name); // Stocke uniquement le nom du fichier
+      logger.debug('Fichier déposé:', file.name);
+    }
+  }}
+>
+  <CloudUpload className="w-12 h-12 text-emerald-500 mb-4" /> {/* Icône de cloud */}
+  <input
+    type="file"
+    accept=".pdf"
+    onChange={(e) => {
+      const file = e.target.files[0];
+      if (file) {
+        setUploadedFileName(file.name); // Stocke uniquement le nom du fichier
+        logger.debug('Fichier sélectionné:', file.name);
+      }
+    }}
+    className="hidden"
+    id="fileInput"
+  />
+  <label htmlFor="fileInput" className="text-center text-gray-500">
+    <p className="text-lg font-semibold text-gray-800">Déposez votre fichier ici</p>
+    <p className="text-sm text-gray-500 mt-2">ou cliquez pour sélectionner un fichier PDF</p>
+  </label>
+</div>
+          {uploadedFileName && (
+        <div className="mt-4 flex items-center space-x-4 bg-gray-100 p-3 rounded-md shadow-sm">
+          <CloudUpload className="w-6 h-6 text-emerald-500" />
+          <p className="text-sm font-medium text-gray-800"><span className="font-semibold">{uploadedFileName}</span></p>
+        </div>
+      )}
+        </div>
+      )}
+
+      {/* Boutons de navigation */}
+      <div className="flex justify-end items-center mt-6 space-x-4">
+        {currentPage > 1 && (
+          <Button
+            text="Précédent"
+            onClick={goToPreviousPage}
+            className="bg-gray-300 text-gray-700 hover:bg-gray-400 px-6 py-2"
+          />
+        )}
+        {currentPage < (isSepa ? 2 : 1) && (
+          <Button
+            text="Suivant"
+            onClick={goToNextPage}
+            primary
+            className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-2"
+          />
+        )}
+        {currentPage === (isSepa ? 2 : 1) && (
+          <Button
+            text="Valider"
+            onClick={handleAccept}
+            primary
+            className={`px-6 py-2 ${isValidateButtonDisabled ? 'bg-gray-300 text-gray-700 cursor-not-allowed' : 'bg-emerald-600 text-white hover:bg-emerald-700'}`}
+            disabled={isValidateButtonDisabled}
+          />
+        )}
+      </div>
+    </div>
+  );
+}