feat: add team entry email & enhance confirmation modal

src/components/confirmationModal.jsx

@@ -1,10 +1,10 @@
 export default function ConfirmationModal({ placeHolder, closeModal }) {
   return (
     <div className="fixed inset-0 bg-gray-800 bg-opacity-75 flex justify-center items-center">
-      <div className="relative bg-black rounded-lg shadow-lg">
+      <div className="relative bg-black border-2 border-gray-500 rounded-lg shadow-lg">
         <div className="p-4 md:p-5 text-center">
           <svg
-            className="mx-auto mb-4 text-gray-400 w-12 h-12"
+            className="mx-auto mb-4 text-white w-12 h-12"
             aria-hidden="true"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"

src/pages/api/teams/join.ts

@@ -1,5 +1,6 @@
 import { createClient } from "@supabase/supabase-js";
 import type { APIRoute } from "astro";
+import { SMTPClient } from "emailjs";
 
 export const prerender = false;
 
@@ -8,6 +9,14 @@ const supabase = createClient(
   import.meta.env.SUPABASE_ANON_KEY,
 );
 
+const senderEmail = import.meta.env.SENDER_EMAIL;
+const client = new SMTPClient({
+  user: import.meta.env.SMTP_USER,
+  password: import.meta.env.SMTP_PASS,
+  host: import.meta.env.SMTP_HOST,
+  ssl: true,
+});
+
 export const POST: APIRoute = async ({ request }) => {
   const formData = await request.formData();
 
@@ -47,6 +56,17 @@ export const POST: APIRoute = async ({ request }) => {
     );
   }
 
+  // get the team name to send the email
+  const { data: data, error: error } = await supabase
+    .from("teams")
+    .select("name")
+    .eq("code", team_code);
+
+  if (data && data.length > 0) {
+    const team_name = data[0].name;
+    sendTeamEntryEmail(email, team_name);
+  }
+
   return new Response(
     JSON.stringify({
       status: 200,
@@ -103,3 +123,33 @@ const validateForms = async (formData: FormData, errors: String[]) => {
 
   return valid;
 };
+
+const sendTeamEntryEmail = async (to: string, team_name: string) => {
+  const message = {
+    text: "",
+    from: senderEmail.toString(),
+    to: to,
+    subject: "[BugsByte] Team entry confirmation",
+    attachment: [
+      {
+        data: `<h1>Hello again 👋</h1>
+          <div>
+            <p>You just entered a new team - <b>${team_name}</b></p>
+            <p>Looking forward to seeing you soon!</p>
+            <p>Organization team 🪲</p>
+          </div>`.toString(),
+        alternative: true,
+      },
+    ],
+  };
+
+  try {
+    client.send(message, function (err, message) {
+      console.log(err || message);
+    });
+
+    return null;
+  } catch (error) {
+    return error;
+  }
+};