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

mail

Front-End/src/app/[locale]/admin/subscriptions/page.js

@@ -14,6 +14,7 @@ import Modal from '@/components/Modal';
 import InscriptionForm from '@/components/Inscription/InscriptionForm'
 import AffectationClasseForm from '@/components/AffectationClasseForm'
 import { useEstablishment } from '@/context/EstablishmentContext';
+import ValidateSubscription from '@/components/Inscription/ValidateSubscription';
 
 import {
   PENDING,
@@ -44,7 +45,8 @@ import { createProfile, deleteProfile, fetchProfiles } from '@/app/actions/authA
 
 import {
   BASE_URL,
-  FE_ADMIN_SUBSCRIPTIONS_EDIT_URL } from '@/utils/Url';
+  FE_ADMIN_SUBSCRIPTIONS_EDIT_URL,
+  FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL } from '@/utils/Url';
 
 import DjangoCSRFToken from '@/components/DjangoCSRFToken'
 import { useCsrfToken } from '@/context/CsrfContext';
@@ -594,11 +596,7 @@ useEffect(()=>{
       3: [
         {
           icon: <CircleCheck className="w-5 h-5 text-green-500 hover:text-green-700" />,
-          onClick: () => openModalAssociationEleve(row.student),
-        },
-        {
-          icon: <XCircle className="w-5 h-5 text-red-500 hover:text-red-700" />,
-          onClick: () => refuseRegistrationForm(row.student.id, row.student.last_name, row.student.first_name, row.student.guardians[0].associated_profile_email),
+          onClick: () => window.location.href = `${FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL}?studentId=${row.student.id}&firstName=${row.student.first_name}&lastName=${row.student.last_name}&paymentMode=${row.registration_payment}&file=${row.registration_file}`,
         },
       ],
       5: [

Front-End/src/app/[locale]/admin/subscriptions/validateSubscription/page.js

@@ -0,0 +1,53 @@
+'use client'
+import React from 'react';
+import { useSearchParams, useRouter } from 'next/navigation';
+import ValidateSubscription from '@/components/Inscription/ValidateSubscription';
+import { sendSEPARegisterForm } from "@/app/actions/subscriptionAction"
+import { useCsrfToken } from '@/context/CsrfContext';
+import logger from '@/utils/logger';
+import { FE_ADMIN_SUBSCRIPTIONS_URL} from '@/utils/Url';
+
+export default function Page() {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+
+  // Récupérer les paramètres de la requête
+  const studentId = searchParams.get('studentId');
+  const firstName = searchParams.get('firstName');
+  const lastName = searchParams.get('lastName');
+  const paymentMode = searchParams.get('paymentMode');
+  const file = searchParams.get('file');
+
+  const csrfToken = useCsrfToken();
+
+  const handleAcceptRF = (data) => {
+    logger.debug('Mise à jour du RF avec les données:', data);
+
+    const {status, sepa_file} = data
+    const formData = new FormData();
+    formData.append('status', status); // Ajoute le statut
+    formData.append('sepa_file', sepa_file); // Ajoute le fichier SEPA
+  
+    // Appeler l'API pour mettre à jour le RF
+    sendSEPARegisterForm(studentId, formData, csrfToken)
+      .then((response) => {
+        logger.debug('RF mis à jour avec succès:', response);
+        router.push(FE_ADMIN_SUBSCRIPTIONS_URL);
+        // Logique supplémentaire après la mise à jour (par exemple, redirection ou notification)
+      })
+      .catch((error) => {
+        logger.error('Erreur lors de la mise à jour du RF:', error);
+      });
+  };
+  
+  return (
+    <ValidateSubscription
+      studentId={studentId}
+      firstName={firstName}
+      lastName={lastName}
+      paymentMode={paymentMode}
+      file={file}
+      onAccept={handleAcceptRF}
+    />
+  );
+}

Front-End/src/app/[locale]/parents/editInscription/page.js

@@ -3,6 +3,7 @@ import React, { useState  } from 'react';
 import InscriptionFormShared from '@/components/Inscription/InscriptionFormShared';
 import { useSearchParams, useRouter } from 'next/navigation';
 import { useCsrfToken } from '@/context/CsrfContext';
+import { useEstablishment } from '@/context/EstablishmentContext';
 import { FE_PARENTS_HOME_URL} from '@/utils/Url';
 import { editRegisterForm} from '@/app/actions/subscriptionAction';
 import logger from '@/utils/logger';
@@ -13,6 +14,7 @@ export default function Page() {
     const studentId = searchParams.get('studentId');
     const router = useRouter();
     const csrfToken = useCsrfToken();
+    const { selectedEstablishmentId } = useEstablishment();
 
     const handleSubmit = async (data) => {
         try {
@@ -28,6 +30,7 @@ export default function Page() {
         <InscriptionFormShared
             studentId={studentId}
             csrfToken={csrfToken}
+            selectedEstablishmentId={selectedEstablishmentId}
             onSubmit={handleSubmit}
             cancelUrl={FE_PARENTS_HOME_URL}
         />

Front-End/src/app/[locale]/parents/page.js

@@ -62,25 +62,6 @@ export default function ParentHomePage() {
     { name: 'Action', transform: (row) => row.action },
   ];
 
-  const getShadowColor = (status) => {
-    switch (status) {
-      case 1:
-        return 'shadow-blue-500'; // Couleur d'ombre plus visible
-      case 2:
-        return 'shadow-orange-500'; // Couleur d'ombre plus visible
-      case 3:
-        return 'shadow-purple-500'; // Couleur d'ombre plus visible
-      case 4:
-        return 'shadow-red-500'; // Couleur d'ombre plus visible
-      case 5:
-        return 'shadow-green-500'; // Couleur d'ombre plus visible
-      case 6:
-        return 'shadow-red-500'; // Couleur d'ombre plus visible
-      default:
-        return 'shadow-green-500'; // Couleur d'ombre plus visible
-    }
-  };
-
   // Définir les colonnes du tableau
   const childrenColumns = [
     { name: 'Nom', transform: (row) => `${row.student.last_name}` },
@@ -89,7 +70,7 @@ export default function ParentHomePage() {
       name: 'Statut',
       transform: (row) => (
         <div className="flex justify-center items-center">
-          <StatusLabel status={row.status} showDropdown={false}/>
+          <StatusLabel status={row.status} showDropdown={false} parent/>
         </div>
       )
     },

Front-End/src/app/actions/registerFileGroupAction.js

@@ -2,7 +2,8 @@ import { BE_SUBSCRIPTION_REGISTRATIONFILE_GROUPS_URL,
         BE_SUBSCRIPTION_REGISTRATION_TEMPLATES_URL,
         BE_SUBSCRIPTION_REGISTRATION_TEMPLATE_MASTER_URL,
         FE_API_DOCUSEAL_CLONE_URL,
-        FE_API_DOCUSEAL_DOWNLOAD_URL
+        FE_API_DOCUSEAL_DOWNLOAD_URL,
+        FE_API_DOCUSEAL_GENERATE_TOKEN
 } from '@/utils/Url';
 
 const requestResponseHandler = async (response) => {
@@ -220,4 +221,14 @@ export const downloadTemplate = (slug) => {
     }
   })
   .then(requestResponseHandler)
-}
+}
+
+export const generateToken = (email, id = null) => {
+  return fetch(`${FE_API_DOCUSEAL_GENERATE_TOKEN}`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ user_email: email, id }),
+  }).then(requestResponseHandler);
+};

Front-End/src/app/actions/subscriptionAction.js

@@ -56,6 +56,17 @@ export const editRegisterForm=(id, data, csrfToken)=>{
     .then(requestResponseHandler)
 };
 
+export const sendSEPARegisterForm=(id, data, csrfToken)=>{
+  return fetch(`${BE_SUBSCRIPTION_REGISTERFORMS_URL}/${id}`, {
+    method: 'PUT',
+    headers: {
+      'X-CSRFToken': csrfToken
+    },
+    body: data,
+    credentials: 'include'
+  })
+  .then(requestResponseHandler)
+};
 
 export const createRegisterForm=(data, csrfToken)=>{
     const url = `${BE_SUBSCRIPTION_REGISTERFORMS_URL}`;

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) => {

Front-End/src/pages/api/docuseal/cloneTemplate.js

@@ -3,7 +3,6 @@ import { BE_DOCUSEAL_CLONE_TEMPLATE } from '@/utils/Url';
 export default function handler(req, res) {
   if (req.method === 'POST') {
     const { templateId, email, is_required } = req.body;
-    console.log('coucou : ', req.body)
 
     fetch(BE_DOCUSEAL_CLONE_TEMPLATE, {
       method: 'POST',

Front-End/src/utils/Url.js

@@ -73,6 +73,7 @@ export const FE_ADMIN_HOME_URL = `/admin`
 // ADMIN/SUBSCRIPTIONS URL
 export const FE_ADMIN_SUBSCRIPTIONS_URL = `/admin/subscriptions`
 export const FE_ADMIN_SUBSCRIPTIONS_EDIT_URL = `/admin/subscriptions/editInscription`
+export const FE_ADMIN_SUBSCRIPTIONS_VALIDATE_URL = `/admin/subscriptions/validateSubscription`
 
 //ADMIN/CLASSES URL
 export const FE_ADMIN_CLASSES_URL = `/admin/classes`
@@ -102,5 +103,6 @@ export const FE_PARENTS_SETTINGS_URL = `/parents/settings`
 export const FE_PARENTS_EDIT_INSCRIPTION_URL = `/parents/editInscription`
 
 // API DOCUSEAL
+export const FE_API_DOCUSEAL_GENERATE_TOKEN = `/api/docuseal/generateToken`
 export const FE_API_DOCUSEAL_CLONE_URL = `/api/docuseal/cloneTemplate`
 export const FE_API_DOCUSEAL_DOWNLOAD_URL = `/api/docuseal/downloadTemplate`