Merge remote-tracking branch 'origin/WIP_Inscriptions' into develop

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

@@ -1,25 +1,35 @@
 'use client';
 import React, { useState, useEffect } from 'react';
-import { DocusealBuilder } from '@docuseal/react';
 import Button from '@/components/Button';
+import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
 import { BASE_URL } from '@/utils/Url';
 import { generateToken } from '@/app/actions/registerFileGroupAction';
+import {
+  fetchSchoolFileTemplatesFromRegistrationFiles,
+  fetchParentFileTemplatesFromRegistrationFiles,
+} from '@/app/actions/subscriptionAction';
 import logger from '@/utils/logger';
-import { GraduationCap, CloudUpload } from 'lucide-react';
+import { GraduationCap } from 'lucide-react';
+import FileUpload from '@/components/FileUpload';
+import SectionHeader from '@/components/SectionHeader';
 
 export default function ValidateSubscription({
   studentId,
   firstName,
   lastName,
-  paymentMode,
+  paymentSepa,
   file,
   onAccept,
 }) {
   const [token, setToken] = useState(null);
   const [uploadedFileName, setUploadedFileName] = useState('');
+  const [selectedFile, setSelectedFile] = useState(null); // Nouvel état pour le fichier sélectionné
   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
+  const [isSepa, setIsSepa] = useState(paymentSepa); // Vérifie si le mode de paiement est SEPA
+  const [currentPage, setCurrentPage] = useState(1); // Gestion des étapes
+  const [schoolFileTemplates, setSchoolFileTemplates] = useState([]); // Stocke les fichiers schoolFileTemplates
+  const [parentFileTemplates, setParentFileTemplates] = useState([]); // Stocke les fichiers parentFileTemplates
+  const [mergeDocuments, setMergeDocuments] = useState(false); // État pour activer/désactiver la fusion des documents
 
   useEffect(() => {
     if (isSepa) {
@@ -33,38 +43,67 @@ export default function ValidateSubscription({
     }
   }, [isSepa]);
 
-  const handleUpload = (detail) => {
-    logger.debug('Uploaded file detail:', detail);
-    setUploadedFileName(detail.name);
-  };
+  useEffect(() => {
+    // Récupérer les fichiers schoolFileTemplates pour l'étudiant
+    fetchSchoolFileTemplatesFromRegistrationFiles(studentId)
+      .then((data) => {
+        setSchoolFileTemplates(data);
+        logger.debug('Fichiers schoolFileTemplates récupérés:', data);
+      })
+      .catch((error) =>
+        logger.error(
+          'Erreur lors de la récupération des schoolFileTemplates:',
+          error
+        )
+      );
+
+    // Récupérer les fichiers parentFileTemplates pour l'étudiant
+    fetchParentFileTemplatesFromRegistrationFiles(studentId)
+      .then((data) => {
+        setParentFileTemplates(data);
+        logger.debug('Fichiers parentFileTemplates récupérés:', data);
+      })
+      .catch((error) =>
+        logger.error(
+          'Erreur lors de la récupération des parentFileTemplates:',
+          error
+        )
+      );
+  }, [studentId]);
 
   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) {
+    if (!selectedFile && isSepa) {
       logger.error('Aucun fichier sélectionné pour le champ SEPA.');
       return;
     }
 
+    // Ajouter le paramètre fusion dans l'URL
+    const fusionParam = mergeDocuments ? 'true' : 'false';
+
     const data = {
       status: 7,
-      sepa_file: file,
+      sepa_file: selectedFile, // Utilise le fichier sélectionné depuis l'état
+      fusionParam: fusionParam,
     };
 
     // 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 handleToggleMergeDocuments = () => {
+    // Inverser l'état de mergeDocuments
+    setMergeDocuments((prevState) => !prevState);
   };
 
   const isValidateButtonDisabled = isSepa && !uploadedFileName;
 
   const goToNextPage = () => {
-    if (currentPage < (isSepa ? 2 : 1)) {
+    const totalPages =
+      1 +
+      schoolFileTemplates.length +
+      parentFileTemplates.length +
+      (isSepa ? 1 : 0);
+    if (currentPage < totalPages) {
       setCurrentPage(currentPage + 1);
     }
   };
@@ -75,93 +114,102 @@ export default function ValidateSubscription({
     }
   };
 
+  const totalPages =
+    1 +
+    schoolFileTemplates.length +
+    parentFileTemplates.length +
+    (isSepa ? 1 : 0);
+
+  const renderContent = () => {
+    if (currentPage === 1) {
+      // Page 1 : Afficher le PDF principal
+      return (
+        <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',
+          }}
+        />
+      );
+    } else if (
+      currentPage > 1 &&
+      currentPage <= 1 + schoolFileTemplates.length
+    ) {
+      // Pages des schoolFileTemplates
+      const index = currentPage - 2; // Décalage pour correspondre à l'index du tableau
+      return (
+        <iframe
+          src={`${BASE_URL}/${schoolFileTemplates[index]?.file}`}
+          title={`Document ${index + 1}`}
+          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',
+          }}
+        />
+      );
+    } else if (
+      currentPage > 1 + schoolFileTemplates.length &&
+      currentPage <= 1 + schoolFileTemplates.length + parentFileTemplates.length
+    ) {
+      // Pages des parentFileTemplates
+      const index = currentPage - 2 - schoolFileTemplates.length; // Décalage pour correspondre à l'index du tableau
+      return (
+        <iframe
+          src={`${BASE_URL}/${parentFileTemplates[index]?.file}`}
+          title={`Document Parent ${index + 1}`}
+          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',
+          }}
+        />
+      );
+    } else if (currentPage === totalPages && isSepa) {
+      // Dernière page : Mandat SEPA
+      return (
+        <FileUpload
+          selectionMessage="Sélectionnez un mandat de prélèvement SEPA"
+          onFileSelect={(file) => {
+            setUploadedFileName(file.name); // Stocke uniquement le nom du fichier
+            setSelectedFile(file); // Stocke le fichier dans l'état
+            logger.debug('Fichier sélectionné:', file.name);
+          }}
+          uploadedFileName={uploadedFileName}
+        />
+      );
+    }
+    return null;
+  };
+
   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>
+    <div className="space-y-6 p-6">
+      <SectionHeader
+        icon={GraduationCap}
+        title={`Dossier scolaire de ${firstName} ${lastName}`}
+        description={`Année scolaire ${new Date().getFullYear()}-${new Date().getFullYear() + 1}`}
+      />
 
       {/* 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>
-      )}
+      <div className="p-6 items-center">{renderContent()}</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>
-          )}
+      {/* Option de fusion des documents (affichée uniquement sur la dernière page) */}
+      {currentPage === totalPages && (
+        <div className="flex items-center justify-between mt-6">
+          <span className="text-gray-700">
+            Fusionner les documents en un seul fichier PDF
+          </span>
+          <ToggleSwitch
+            label="Fusionner"
+            checked={mergeDocuments}
+            onChange={handleToggleMergeDocuments} // Appeler la fonction pour inverser l'état
+          />
         </div>
       )}
 
@@ -174,7 +222,7 @@ export default function ValidateSubscription({
             className="bg-gray-300 text-gray-700 hover:bg-gray-400 px-6 py-2"
           />
         )}
-        {currentPage < (isSepa ? 2 : 1) && (
+        {currentPage < totalPages && (
           <Button
             text="Suivant"
             onClick={goToNextPage}
@@ -182,7 +230,7 @@ export default function ValidateSubscription({
             className="bg-emerald-500 text-white hover:bg-emerald-600 px-6 py-2"
           />
         )}
-        {currentPage === (isSepa ? 2 : 1) && (
+        {currentPage === totalPages && (
           <Button
             text="Valider"
             onClick={handleAccept}