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

mail

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>
+  );
+}

Front-End/src/components/StatusLabel.js

@@ -2,18 +2,48 @@ import { useState } from 'react';
 import { ChevronUp } from 'lucide-react';
 import DropdownMenu from './DropdownMenu';
 
-const StatusLabel = ({ status, onChange, showDropdown = true }) => {
+const StatusLabel = ({ status, onChange, showDropdown = true, parent }) => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
-  const statusOptions = [
-    { value: 1, label: 'A envoyer' },
-    { value: 2, label: 'En attente' },
-    { value: 3, label: 'Signé' },
-    { value: 4, label: 'A Relancer' },
-    { value: 5, label: 'Validé' },
-    { value: 6, label: 'Archivé' },
-  ];
+
+  // Définir les options de statut en fonction de la prop `parent`
+  const statusOptions = parent
+    ? [
+        { value: 2, label: 'Nouveau' },
+        { value: 3, label: 'En validation' },
+        { value: 7, label: 'SEPA reçu' },
+      ]
+    : [
+        { value: 1, label: 'A envoyer' },
+        { value: 2, label: 'En attente' },
+        { value: 3, label: 'Signé' },
+        { value: 4, label: 'A Relancer' },
+        { value: 5, label: 'Validé' },
+        { value: 6, label: 'Archivé' },
+        { value: 7, label: 'En attente SEPA' },
+      ];
 
   const currentStatus = statusOptions.find(option => option.value === status);
+
+  // Définir les couleurs en fonction du statut
+  const getStatusClass = () => {
+    if (parent) {
+      return (
+        status === 2 && 'bg-orange-50 text-orange-600' ||
+        status === 3 && 'bg-purple-50 text-purple-600' ||
+        status === 7 && 'bg-yellow-50 text-yellow-600'
+      );
+    }
+    return (
+      status === 1 && 'bg-blue-50 text-blue-600' ||
+      status === 2 && 'bg-orange-50 text-orange-600' ||
+      status === 3 && 'bg-purple-50 text-purple-600' ||
+      status === 4 && 'bg-red-50 text-red-600' ||
+      status === 5 && 'bg-green-50 text-green-600' ||
+      status === 6 && 'bg-red-50 text-red-600' ||
+      status === 7 && 'bg-yellow-50 text-yellow-600'
+    );
+  };
+
   return (
     <>
       {showDropdown ? (
@@ -28,27 +58,13 @@ const StatusLabel = ({ status, onChange, showDropdown = true }) => {
             label: option.label,
             onClick: () => onChange(option.value),
           }))}
-          buttonClassName={`w-[150px] flex items-center justify-center gap-2 px-2 py-2 rounded-md text-sm text-center font-medium ${
-            status === 1 && 'bg-blue-50 text-blue-600' ||
-            status === 2 && 'bg-orange-50 text-orange-600' ||
-            status === 3 && 'bg-purple-50 text-purple-600' ||
-            status === 4 && 'bg-red-50 text-red-600' ||
-            status === 5 && 'bg-green-50 text-green-600' ||
-            status === 6 && 'bg-red-50 text-red-600'
-          }`}
+          buttonClassName={`w-[150px] flex items-center justify-center gap-2 px-2 py-2 rounded-md text-sm text-center font-medium ${getStatusClass()}`}
           menuClassName="absolute right-0 mt-2 w-48 bg-white border border-gray-200 rounded-md shadow-lg z-10"
           dropdownOpen={dropdownOpen}
           setDropdownOpen={setDropdownOpen}
         />
       ) : (
-        <div className={`w-[150px] flex items-center justify-center gap-2 px-2 py-2 rounded-md text-sm text-center font-medium ${
-            status === 1 && 'bg-blue-50 text-blue-600' ||
-            status === 2 && 'bg-orange-50 text-orange-600' ||
-            status === 3 && 'bg-purple-50 text-purple-600' ||
-            status === 4 && 'bg-red-50 text-red-600' ||
-            status === 5 && 'bg-green-50 text-green-600' ||
-            status === 6 && 'bg-red-50 text-red-600'
-        }`}>
+        <div className={`w-[150px] flex items-center justify-center gap-2 px-2 py-2 rounded-md text-sm text-center font-medium ${getStatusClass()}`}>
           {currentStatus ? currentStatus.label : 'Statut inconnu'}
         </div>
       )}

Front-End/src/components/Structure/Files/FileUpload.js

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
-import { fetchRegistrationFileGroups, createRegistrationTemplates, cloneTemplate } from '@/app/actions/registerFileGroupAction';
+import { fetchRegistrationFileGroups, createRegistrationTemplates, cloneTemplate, generateToken } from '@/app/actions/registerFileGroupAction';
 import { DocusealBuilder } from '@docuseal/react';
 import logger from '@/utils/logger';
-import { BE_DOCUSEAL_GET_JWT, BASE_URL } from '@/utils/Url';
+import { BE_DOCUSEAL_GET_JWT, BASE_URL, FE_API_DOCUSEAL_GENERATE_TOKEN } from '@/utils/Url';
 import Button from '@/components/Button'; // Import du composant Button
 import MultiSelect from '@/components/MultiSelect'; // Import du composant MultiSelect
 import { useCsrfToken } from '@/context/CsrfContext';
@@ -33,27 +33,14 @@ export default function FileUpload({ handleCreateTemplateMaster, handleEditTempl
   }, [fileToEdit]);
 
   useEffect(() => {
-    const body = fileToEdit
-      ? JSON.stringify({
-          user_email: 'n3wt.school@gmail.com',
-          id: fileToEdit.id
-        })
-      : JSON.stringify({
-          user_email: 'n3wt.school@gmail.com'
-        });
-  
-    fetch('/api/docuseal/generateToken', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: body,
-    })
-    .then((response) => response.json())
-    .then((data) => {
-      setToken(data.token);
-    })
-    .catch((error) => console.error(error));
+    const email = 'n3wt.school@gmail.com';
+    const id = fileToEdit ? fileToEdit.id : null;
+
+    generateToken(email, id)
+      .then((data) => {
+        setToken(data.token);
+      })
+      .catch((error) => console.error('Erreur lors de la génération du token:', error));
   }, [fileToEdit]);
 
   const handleFileNameChange = (event) => {