feat: add invitation email option

Author: earzalien

client/src/pages/TripInvitation.tsx

@@ -35,7 +35,7 @@ function TripInvitation({
     email: "",
     message: "",
   });
-
+  const [copyLink, setCopyLink] = useState(false);
   const [loading, setLoading] = useState(false);
 
   const formatDate = (dateString: string) => {
@@ -62,6 +62,7 @@ function TripInvitation({
 
   const cancelInvitation = (e: React.MouseEvent<HTMLButtonElement>) => {
     setInvitationForm({ email: "", message: "" });
+    setCopyLink(false);
     if (onClose) onClose(e);
   };
 
@@ -74,7 +75,7 @@ function TripInvitation({
   const copyToClipboard = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
-      toast.success("Lien d’invitation copié 📋");
+      toast.success("Lien d'invitation copié");
     } catch {
       toast.error("Impossible de copier le lien");
     }
@@ -100,8 +101,13 @@ function TripInvitation({
         throw new Error(data.error || "Erreur lors de l'envoi");
       }
 
-      await copyToClipboard(data.invitationLink);
+      if (copyLink) {
+        await copyToClipboard(data.invitationLink);
+        toast.success("Email envoyé avec succès");
+      }
+
       setInvitationForm({ email: "", message: "" });
+      setCopyLink(false);
     } catch {
       toast.error("Erreur lors de l'envoi de l'invitation");
     } finally {
@@ -120,7 +126,6 @@ function TripInvitation({
       }}
       aria-modal="true"
     >
-
       <ToastContainer position="top-right" autoClose={3000} theme="light" />
       <article className="tripinvitation-invitation-form">
         <div className="tripinvitation-head">
@@ -162,6 +167,7 @@ function TripInvitation({
               onChange={updateInvitationForm}
               required
               placeholder="adresse@email.com"
+              disabled={loading}
             />
           </label>
 
@@ -172,15 +178,28 @@ function TripInvitation({
               value={invitationForm.message}
               onChange={updateInvitationForm}
               placeholder="Ajoutez un message personnalisé..."
+              disabled={loading}
             />
           </label>
 
+          <label>
+            <div className="tripinvitation-copy-checkbox">
+            <input
+              type="checkbox"
+              checked={copyLink}
+              onChange={(e) => setCopyLink(e.target.checked)}
+              disabled={loading}
+            />
+            Copier aussi le lien d'invitation
+            </div>
+          </label>
+
           <button
             type="submit"
             className="tripinvitation-btn-send-invitation"
-            disabled={loading}
+            disabled={loading || !invitationForm.email}
           >
-            {loading ? "Copie..." : "Copier le lien d'invitation"}
+            {loading ? "Envoi..." : "Envoyer par email"}
           </button>
 
           <button

client/src/pages/styles/TripInvitation.css

@@ -143,6 +143,19 @@
 .tripinvitation-btn-cancel-invitation:hover {
   background: #f3f4f6;
 }
+.tripinvitation-copy-checkbox {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  font-size: 0.9rem;
+  color: #666;
+  margin-bottom: 1rem;
+}
+
+.tripinvitation-copy-checkbox input[type="checkbox"] {
+  margin-top: 0.05rem;
+  flex-shrink: 0;
+}
 
 @media (max-width: 768px) {
   .tripinvitation-invitation-form {

package-lock.json

@@ -16,6 +16,10 @@ CLIENT_URL=http://localhost:3000
 
 GOOGLE_API_KEY=YOUR_API_KEY
 
+RESEND_API_KEY=YOUR_API_KEY
+RESEND_FROM="YOUR NAME <NAME@DOMAIN.com>"
+
+
 # About specific needs, please ask your trainer about the deploiement project name and follow the pattern
 # You can add as much variable as needed. Don't forget to tell your trainer about it. Otherwise, it could break on deploiement
 PROJECT_NAME_SPECIFIC_NAME=YOUR_SPECIFIC_VALUE

server/.env.sample

@@ -18,7 +18,8 @@
     "joi": "^18.0.2",
     "jsonwebtoken": "^9.0.3",
     "mysql2": "^3.16.0",
-    "react-toastify": "^11.0.5"
+    "react-toastify": "^11.0.5",
+    "resend": "^6.9.4"
   },
   "devDependencies": {
     "@faker-js/faker": "^9.6.0",

server/package.json

@@ -0,0 +1,5 @@
+import { Resend } from "resend";
+
+const resend = new Resend(process.env.RESEND_API_KEY);
+
+export default resend;

server/src/libs/resend.ts

@@ -2,6 +2,7 @@ import type { RequestHandler } from "express";
 import tripRepository from "../trip/tripRepository";
 import userRepository from "../user/userRepository";
 import invitationRepository from "./invitationRepository";
+import resend from "../../libs/resend";
 
 const read: RequestHandler = async (req, res, next) => {
   try {
@@ -110,7 +111,29 @@ const add: RequestHandler = async (req, res, next) => {
 
     const invitationLink = `${clientUrl}/trip/${tripId}/invitation/${invitationId}`;
 
-    res.status(201).json({ invitationLink });
+    const { data, error } = await resend.emails.send({
+      from: process.env.RESEND_FROM as string,
+      to: email,
+      subject: "Invitation à rejoindre un voyage sur TripTogether",
+      html: `
+        <p>Bonjour,</p>
+        <p>Vous avez reçu une invitation à rejoindre un voyage sur TripTogether.</p>
+        <p>Message :</p>
+        <blockquote>${message}</blockquote>
+        <p>Pour voir l'invitation et répondre, cliquez sur le lien ci-dessous :</p>
+        <p><a href="${invitationLink}">${invitationLink}</a></p>
+        <p>À bientôt sur TripTogether !</p>
+      `,
+    });
+
+    if (error) {
+      // à toi de voir : soit tu lances une erreur, soit tu continues mais tu logs
+      console.error("Erreur envoi email invitation:", error);
+      // Option 1 : throw error pour que le front sache que l’email n’est pas parti
+      // throw new Error("Erreur lors de l'envoi de l'email d'invitation");
+    }
+
+    res.status(201).json({ invitationLink, emailSent: !error, emailData: data });
   } catch (err) {
     next(err);
   }