feat: Messagerie WIP [#17]

Front-End/src/components/Admin/EmailSender.js

@@ -1,75 +1,163 @@
 'use client';
 
-import React, { useState } from 'react';
-import { Editor } from '@tinymce/tinymce-react';
-import { sendMessage } from '@/app/actions/messagerieAction';
+import React, { useState, useEffect } from 'react';
+import dynamic from 'next/dynamic';
+import { sendMessage, searchRecipients } from '@/app/actions/messagerieAction';
+import { fetchSmtpSettings } from '@/app/actions/settingsAction';
+import { useNotification } from '@/context/NotificationContext';
+import { useEstablishment } from '@/context/EstablishmentContext';
+import AlertMessage from '@/components/AlertMessage';
+import RecipientInput from '@/components/RecipientInput';
+
+// Charger Quill dynamiquement pour éviter les problèmes de SSR
+const ReactQuill = dynamic(() => import('react-quill'), { ssr: false });
+import 'react-quill/dist/quill.snow.css'; // Importer les styles de Quill
 
 export default function EmailSender({ csrfToken }) {
-  const [recipients, setRecipients] = useState('');
+  const [recipients, setRecipients] = useState([]);
+  const [fromEmail, setFromEmail] = useState('');
+  const [cc, setCc] = useState([]);
+  const [bcc, setBcc] = useState([]);
   const [subject, setSubject] = useState('');
   const [message, setMessage] = useState('');
-  const [status, setStatus] = useState('');
+  const [smtpConfigured, setSmtpConfigured] = useState(false); // État pour vérifier si SMTP est configuré
+  const { showNotification } = useNotification();
+  const { selectedEstablishmentId } = useEstablishment(); // Récupérer l'establishment_id depuis le contexte
+
+  useEffect(() => {
+    // Vérifier si les paramètres SMTP sont configurés
+    fetchSmtpSettings(csrfToken, selectedEstablishmentId)
+      .then((data) => {
+        if (data.smtp_server && data.smtp_port && data.smtp_user) {
+          setFromEmail(data.smtp_user);
+          setSmtpConfigured(true);
+        } else {
+          setSmtpConfigured(false);
+        }
+      })
+      .catch((error) => {
+        console.error(
+          'Erreur lors de la vérification des paramètres SMTP:',
+          error
+        );
+        setSmtpConfigured(false);
+      });
+  }, [csrfToken, selectedEstablishmentId]);
 
   const handleSendEmail = async () => {
     const data = {
-      recipients: recipients.split(',').map((email) => email.trim()),
+      recipients,
+      cc,
+      bcc,
       subject,
       message,
+      establishment_id: selectedEstablishmentId, // Ajouter l'establishment_id à la payload
     };
-    sendMessage(data);
+
+    try {
+      await sendMessage(data);
+      showNotification('Email envoyé avec succès.', 'success', 'Succès');
+      // Réinitialiser les champs après succès
+      setRecipients([]);
+      setCc([]);
+      setBcc([]);
+      setSubject('');
+      setMessage('');
+    } catch (error) {
+      console.error("Erreur lors de l'envoi de l'email:", error);
+      showNotification(
+        "Une erreur est survenue lors de l'envoi de l'email.",
+        'error',
+        'Erreur'
+      );
+    }
   };
 
+  if (!smtpConfigured) {
+    return (
+      <AlertMessage
+        type="warning"
+        title="Configuration SMTP requise"
+        message="Les paramètres SMTP de cet établissement ne sont pas configurés. Veuillez les configurer dans la page des paramètres."
+        actionLabel="Aller aux paramètres"
+        onAction={() => (window.location.href = '/admin/settings')} // Redirige vers la page des paramètres
+      />
+    );
+  }
+
   return (
-    <div className="p-4 bg-white rounded shadow">
-      <h2 className="text-xl font-bold mb-4">Envoyer un Email</h2>
-      <div className="mb-4">
-        <label className="block font-medium">
-          Destinataires (séparés par des virgules)
-        </label>
-        <input
-          type="text"
-          value={recipients}
-          onChange={(e) => setRecipients(e.target.value)}
-          className="w-full p-2 border rounded"
-        />
+    <div className="max-w-3xl mx-auto bg-white rounded-lg shadow-md">
+      {/* Header */}
+      <div className="flex items-center justify-between px-4 py-2 border-b">
+        <h2 className="text-sm font-medium text-gray-700">
+          Email from {fromEmail}
+        </h2>
       </div>
-      <div className="mb-4">
-        <label className="block font-medium">Sujet</label>
-        <input
-          type="text"
-          value={subject}
-          onChange={(e) => setSubject(e.target.value)}
-          className="w-full p-2 border rounded"
+
+      {/* Form */}
+      <div className="p-4">
+        {/* To */}
+        <RecipientInput
+          label="Destinataires"
+          recipients={recipients}
+          setRecipients={setRecipients}
+          searchRecipients={searchRecipients} // Passer l'action de recherche
+          establishmentId={selectedEstablishmentId} // Passer l'ID de l'établissement
         />
+
+        {/* Cc and Bcc */}
+        <div className="flex space-x-4">
+          <RecipientInput
+            label="Cc"
+            placeholder="Add Cc"
+            recipients={cc}
+            setRecipients={setCc}
+          />
+          <RecipientInput
+            label="Bcc"
+            placeholder="Add Bcc"
+            recipients={bcc}
+            setRecipients={setBcc}
+          />
+        </div>
+
+        {/* Subject */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700">
+            Subject
+          </label>
+          <input
+            type="text"
+            value={subject}
+            onChange={(e) => setSubject(e.target.value)}
+            placeholder="Enter subject"
+            className="w-full p-2 border rounded"
+          />
+        </div>
+
+        {/* Email Body */}
+        <div className="mb-4">
+          <label className="block text-sm font-medium text-gray-700">
+            Your email
+          </label>
+          <ReactQuill
+            theme="snow"
+            value={message}
+            onChange={setMessage}
+            placeholder="Write your email here..."
+          />
+        </div>
+
+        {/* Footer */}
+        <div className="flex justify-between items-center">
+          <button
+            onClick={handleSendEmail}
+            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+          >
+            Send email
+          </button>
+        </div>
       </div>
-      <div className="mb-4">
-        <label className="block font-medium">Message</label>
-        <Editor
-          apiKey="8ftyao41dcp1et0p409ipyrdtp14wxs0efqdofvrjq1vo2gi" // Remplacez par votre clé API TinyMCE
-          value={message}
-          init={{
-            height: 300,
-            menubar: false,
-            plugins: [
-              'advlist autolink lists link image charmap print preview anchor',
-              'searchreplace visualblocks code fullscreen',
-              'insertdatetime media table paste code help wordcount',
-            ],
-            toolbar:
-              'undo redo | formatselect | bold italic backcolor | \
-              alignleft aligncenter alignright alignjustify | \
-              bullist numlist outdent indent | removeformat | help',
-          }}
-          onEditorChange={(content) => setMessage(content)}
-        />
-      </div>
-      <button
-        onClick={handleSendEmail}
-        className="bg-blue-500 text-white px-4 py-2 rounded"
-      >
-        Envoyer
-      </button>
-      {status && <p className="mt-4 text-sm">{status}</p>}
     </div>
   );
 }