Setup email implementation

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-tooltip": "^1.0.7",
+    "@react-email/components": "^0.0.31",
     "@react-three/drei": "^9.109.2",
     "@react-three/fiber": "^8.16.8",
     "@react-three/rapier": "^1.4.0",
@@ -34,11 +35,13 @@
     "next": "14.2.5",
     "next-themes": "^0.3.0",
     "nextjs-toploader": "^1.6.12",
+    "nodemailer": "^6.9.16",
     "react": "^18",
     "react-dom": "^18",
     "react-firebase-hooks": "^5.1.1",
     "react-hook-form": "^7.51.3",
     "react-parallax-tilt": "^1.7.221",
+    "sharp": "^0.33.5",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
@@ -50,6 +53,7 @@
   },
   "devDependencies": {
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.17",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "@types/three": "^0.167.1",

src/app/api/email/route.ts

@@ -0,0 +1,31 @@
+import { NextRequest, NextResponse } from "next/server";
+import { render } from "@react-email/render";
+import Email from "@/components/devfest24-email";
+import { handleSendEmail } from "@/lib/email";
+
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const { id, email, firstName, lastName } = body;
+
+    const htmlContent = await render(Email({ id, firstName, lastName }));
+
+    await handleSendEmail({
+      to: email,
+      subject: "Certificate: DevFest Bacolod 2024",
+      html: htmlContent,
+    });
+
+    return NextResponse.json({ message: "Success" }, { status: 200 });
+  } catch (err: any) {
+    console.error("Error sending email:", err, process.env.NODEMAILER_PW);
+    return NextResponse.json({ message: err.message }, { status: 500 });
+  }
+}
+
+export async function GET() {
+  return NextResponse.json(
+    { message: "GET request received" },
+    { status: 200 },
+  );
+}

src/app/event/components/devfest24-cert.tsx

@@ -65,14 +65,13 @@ export function DevfestCertificate() {
           link.download = `certificate_${certId}.png`;
           link.href = dataUrl;
           link.click();
-          toast.success("Image Saved!");
           setImgLoading(false);
         })
         .catch((err) => {
           toast.error(err.message);
           setImgLoading(false);
         }),
-      { loading: "Saving image...", success: "Saved image!", error: "Error!" },
+      { loading: "Saving image...", success: "Image saved!", error: "Error!" },
     );
   }, [cardRef, certId]);
 

src/app/event/components/event-landing.tsx

@@ -79,13 +79,31 @@ export default function EventLanding({
     try {
       const querySnapshot = await getDocs(q);
       let message = "⚠️ Certificate Not Found";
-      querySnapshot.forEach((doc) => {
-        if (doc.data().email) {
+
+      for (const doc of querySnapshot.docs) {
+        const data = doc.data();
+
+        if (doc.exists()) {
+          await fetch("/api/email", {
+            method: "POST",
+            headers: {
+              Accept: "application/json",
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              id: doc.id,
+              email: data.email,
+              firstName: data.firstName,
+              lastName: data.lastName,
+            }),
+          });
+
           push(`/event/${eventCode}/${values.type}?id=${doc.id}`);
           message = "✅ Certificate found!";
-          return;
+          break;
         }
-      });
+      }
+
       toast(message);
       setLoading(false);
     } catch (err: any) {
@@ -144,7 +162,11 @@ export default function EventLanding({
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
-                          <SelectItem className="cursor-pointer" value="badge">
+                          <SelectItem
+                            disabled
+                            className="cursor-pointer"
+                            value="badge"
+                          >
                             Badge
                           </SelectItem>
                           <SelectItem className="cursor-pointer" value="cert">

src/components/devfest24-email.tsx

@@ -0,0 +1,132 @@
+import {
+  Body,
+  Button,
+  Container,
+  Head,
+  Heading,
+  Hr,
+  Html,
+  Img,
+  Link,
+  Preview,
+  Section,
+  Tailwind,
+  Text,
+} from "@react-email/components";
+import * as React from "react";
+
+type Props = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  eventName?: string;
+};
+
+export const CertificateEmail = ({
+  id,
+  firstName,
+  lastName,
+  eventName = "DevFest Bacolod 2024",
+}: Props) => {
+  const previewText = `Your ${eventName} Certificate is Ready!`;
+
+  return (
+    <Html>
+      <Head />
+      <Preview>{previewText}</Preview>
+      <Tailwind>
+        <Body className="mx-auto my-auto bg-gray-100 font-sans">
+          <Container className="mx-auto my-[40px] w-[600px] rounded-lg bg-white p-[40px] shadow-lg">
+            <Section className="text-center">
+              <Img
+                src="https://utfs.io/f/K2HIaQ8LhAUDkkIOjmX91ZWgOj8dDqEUPL56RSs2ra4foY0B"
+                width="80"
+                height="80"
+                alt="GDG Bacolod Logo"
+                className="mx-auto mb-4 object-contain"
+              />
+              <Heading className="m-0 mb-2 text-3xl font-bold text-gray-800">
+                GDG Bacolod
+              </Heading>
+            </Section>
+            <Section className="mb-8 text-center">
+              <Img
+                src="https://utfs.io/f/K2HIaQ8LhAUDxjZaTu0PmZioRV2GOf4tcMjsN1pS6LD9dQ0k"
+                width="250"
+                height="250"
+                alt="Certificate Preview"
+                className="mx-auto mb-4 object-contain"
+              />
+            </Section>
+            <Text className="mb-4 text-base leading-6 text-gray-600">
+              Dear {firstName} {lastName},
+            </Text>
+            <Text className="mb-6 text-base leading-6 text-gray-600">
+              Congratulations! 🎉 Your certificate for{" "}
+              <strong>{eventName}</strong> is now available. We&apos;re thrilled
+              to recognize your participation and achievement.
+            </Text>
+            <Section className="mb-8 text-center">
+              <Button
+                className="rounded-full bg-blue-600 px-6 py-3 text-center text-base font-semibold text-white no-underline transition-all hover:bg-blue-700"
+                href={`https://gdg.omsimos.com/event/devfest-24/cert?id=${id}`}
+              >
+                View Your Certificate
+              </Button>
+            </Section>
+            <Text className="mb-6 text-base leading-6 text-gray-600">
+              Don&apos;t forget to share your achievement on social media.
+              It&apos;s a great way to showcase your involvement in the tech
+              community!
+            </Text>
+              <Text className="mb-4 text-base leading-6 text-gray-600">
+                We value your feedback! Please take a moment to share your
+                thoughts about the event:
+              </Text>
+            <Section className="mb-8 text-center">
+              <Link
+                href="https://omsimos.com"
+                className="text-blue-600 underline"
+              >
+                Provide Feedback
+              </Link>
+            </Section>
+            <Hr className="mx-0 my-6 w-full border border-solid border-gray-200" />
+            <Text className="text-center text-sm leading-6 text-gray-500">
+              This certificate is powered by{" "}
+              <Link
+                href="https://omsimos.com"
+                className="text-blue-600 no-underline"
+              >
+                omsimos.com
+              </Link>
+            </Text>
+            <Text className="text-center text-sm leading-6 text-gray-500">
+              If you didn&apos;t participate in this event, please disregard
+              this email.
+            </Text>
+            <Section className="mt-8 text-center">
+              <Text className="mb-4 text-sm text-gray-500">
+                Follow us on social media:
+              </Text>
+              <Link
+                href="https://facebook.com/gdgbacolod"
+                className="mx-2 text-blue-600 no-underline"
+              >
+                Facebook
+              </Link>
+              <Link
+                href="https://linkedin.com/company/gdgbacolod"
+                className="mx-2 text-blue-600 no-underline"
+              >
+                LinkedIn
+              </Link>
+            </Section>
+          </Container>
+        </Body>
+      </Tailwind>
+    </Html>
+  );
+};
+
+export default CertificateEmail;

src/lib/email.ts

@@ -0,0 +1,41 @@
+import nodemailer from "nodemailer";
+import Mail from "nodemailer/lib/mailer";
+
+type Payload = {
+  to: string;
+  subject: string;
+  html: string;
+  attachments?: Mail.Attachment[];
+};
+
+export const handleSendEmail = async (data: Payload) => {
+  let transporter = nodemailer.createTransport({
+    host: "smtp.hostinger.com",
+    port: 465,
+    secure: true,
+    debug: process.env.NODE_ENV === "development",
+    tls: {
+      rejectUnauthorized: false,
+    },
+    auth: {
+      user: process.env.NODEMAILER_EMAIL,
+      pass: process.env.NODEMAILER_PW,
+    },
+  });
+
+  return (
+    await transporter.sendMail({
+      from: "[email protected]",
+      ...data,
+    }),
+    function (error: string, _info: string) {
+      if (error) {
+        console.log("Your Email", process.env.NODEMAILER_EMAIL);
+        throw new Error(error);
+      } else {
+        console.log("Email Sent");
+        return true;
+      }
+    }
+  );
+};