feat: Signatures électroniques docuseal [#22]

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

@@ -0,0 +1,200 @@
+import React, { useState, useEffect } from 'react';
+import ToggleSwitch from '@/components/ToggleSwitch'; // Import du composant ToggleSwitch
+import { fetchRegistrationFileGroups } from '@/app/actions/registerFileGroupAction';
+import DocusealBuilder from '@/components/DocusealBuilder'; // Import du composant wrapper
+import logger from '@/utils/logger';
+import { BE_DOCUSEAL_GET_JWT, BASE_URL } from '@/utils/Url';
+import Button from '@/components/Button'; // Import du composant Button
+import MultiSelect from '@/components/MultiSelect'; // Import du composant MultiSelect
+import { createRegistrationTemplates } from '@/app/actions/subscriptionAction'; // Import de la fonction createRegistrationTemplates
+import { useCsrfToken } from '@/context/CsrfContext';
+
+export default function FileUpload({ handleCreateTemplateMaster, fileToEdit = null }) {
+  const [isRequired, setIsRequired] = useState(false); // État pour le toggle isRequired
+  const [order, setOrder] = useState(0);
+  const [groups, setGroups] = useState([]);
+  const [token, setToken] = useState(null);
+  const [templateMaster, setTemplateMaster] = useState(null);
+  const [uploadedFileName, setUploadedFileName] = useState('');
+  const [selectedGroups, setSelectedGroups] = useState([]);
+  const [guardianEmails, setGuardianEmails] = useState([]);
+  const [registrationFormIds, setRegistrationFormIds] = useState([]);
+
+  const csrfToken = useCsrfToken();
+
+  useEffect(() => {
+    fetchRegistrationFileGroups().then(data => setGroups(data));
+
+    if (fileToEdit) {
+      setUploadedFileName(fileToEdit.name || '');
+      setSelectedGroups(fileToEdit.groups || []);
+    }
+  }, [fileToEdit]);
+
+  useEffect(() => {
+    const body = fileToEdit
+      ? JSON.stringify({
+          user_email: 'n3wt.school@gmail.com',
+          template_id: fileToEdit.template_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));
+  }, [fileToEdit]);
+
+  const handleFileNameChange = (event) => {
+    setUploadedFileName(event.target.value);
+  };
+
+  const handleGroupChange = (selectedGroups) => {
+    setSelectedGroups(selectedGroups);
+  
+    const emails = selectedGroups.flatMap(group => group.registration_forms.flatMap(form => form.guardians.map(guardian => guardian.email)));
+    setGuardianEmails(emails); // Mettre à jour la variable d'état avec les emails des guardians
+  
+    const registrationFormIds = selectedGroups.flatMap(group => group.registration_forms.map(form => form.student_id));
+    setRegistrationFormIds(registrationFormIds); // Mettre à jour la variable d'état avec les IDs des dossiers d'inscription
+  
+    logger.debug('Emails des Guardians associés aux groupes sélectionnés:', emails);
+    logger.debug('IDs des dossiers d\'inscription associés aux groupes sélectionnés:', registrationFormIds);
+  };
+
+  const handleLoad = (detail) => {
+    const templateId = detail?.id;
+    setTemplateMaster(detail);
+    logger.debug('Master template created with ID:', templateId);
+  }
+
+  const handleUpload = (detail) => {
+    logger.debug('Uploaded file detail:', detail);
+    setUploadedFileName(detail.name);
+  };
+
+  const handleSubmit = () => {
+    logger.debug('Création du template master:', templateMaster?.id);
+    handleCreateTemplateMaster({
+      name: uploadedFileName,
+      group_ids: selectedGroups.map(group => group.id),
+      template_id: templateMaster?.id
+    });
+
+    guardianEmails.forEach((email, index) => {
+      cloneTemplate(templateMaster?.id, email)
+        .then(clonedDocument => {
+
+          // Sauvegarde des templates clonés dans la base de données
+          const data = {
+            name: `clone_${clonedDocument.id}`,
+            template_id: clonedDocument.id,
+            master: templateMaster?.id,
+            registration_form: registrationFormIds[index]
+          };
+
+          createRegistrationTemplates(data, csrfToken)
+            .then(response => {
+              logger.debug('Template enregistré avec succès:', response);
+            })
+            .catch(error => {
+              logger.error('Erreur lors de l\'enregistrement du template:', error);
+            });
+
+
+          // Logique pour envoyer chaque template au submitter
+          logger.debug('Sending template to:', email);
+        })
+        .catch(error => {
+          logger.error('Error during cloning or sending:', error);
+        });
+    });
+  };
+
+  const cloneTemplate = (templateId, email) => {
+    return fetch('/api/docuseal/cloneTemplate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        templateId,
+        email
+      })
+    })
+    .then(response => {
+      if (!response.ok) {
+        return response.json().then(err => { throw new Error(err.message); });
+      }
+      return response.json();
+    })
+    .then(data => {
+      logger.debug('Template cloned successfully:', data);
+      return data;
+    })
+    .catch(error => {
+      console.error('Error cloning template:', error);
+      throw error;
+    });
+  };
+
+  return (
+    <div className="h-full flex flex-col mt-4 space-y-4">
+      <div className="grid grid-cols-10 gap-4 items-start">
+        <div className="col-span-2">
+          <MultiSelect
+            name="groups"
+            label="Sélection de groupes de fichiers"
+            options={groups}
+            selectedOptions={selectedGroups}
+            onChange={handleGroupChange}
+            errorMsg={null}
+          />
+        </div>
+        <div className="col-span-7">
+          {token && (
+            <DocusealBuilder 
+              token={token} 
+              headers={{
+                'Authorization': `Bearer ${token}`
+              }}
+              withSendButton={false}
+              withSignYourselfButton={false}
+              autosave={true}
+              language={'fr'}
+              onLoad={handleLoad}
+              onUpload={handleUpload}
+              className="h-full overflow-auto" // Ajouter overflow-auto pour permettre le défilement
+              style={{ maxHeight: '70vh' }} // Limiter la hauteur maximale du composant
+              // Il faut auter l'host correspondant (une fois passé en HTTPS)
+              //host="docuseal:3001"
+            />
+          )}
+        </div>
+        <div className="col-span-1 flex justify-end">
+          <Button
+            text="Valider"
+            onClick={handleSubmit}
+            className={`px-4 py-2 rounded-md shadow-sm focus:outline-none ${
+              (uploadedFileName === '' || selectedGroups.length === 0)
+                ? "bg-gray-300 text-gray-700 cursor-not-allowed"
+                : "bg-emerald-500 text-white hover:bg-emerald-600"
+            }`}
+            primary
+            disabled={uploadedFileName === '' || selectedGroups.length === 0}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}