fix: Resend api fix (#204)

* chore: fixed package.json and improve minor fixes

* refactor: changed cookie name from userId to accountId and fix docker version

* fix: missing scope error fix from console

* refactor: appwrite-gen migration fixed

* fix: api fix and activity running on server

next.config.js

@@ -1,18 +1,27 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    webpack: (config) => {
+  webpack: (config) => {
     config.watchOptions = {
       poll: 1000,
       aggregateTimeout: 300,
-    }
-    return config
+    };
+    return config;
   },
   typescript: {
     ignoreBuildErrors: true,
   },
   images: {
     domains: ["cloud.appwrite.io"],
   },
+
+  experimental: {
+    serverComponentsExternalPackages: [
+      "@react-email/components",
+      "@react-email/render",
+      "@react-email/html",
+    ],
+  },
+  transpilePackages: ["@react-email/components", "@react-email/render", "@react-email/html"],
 };
 
 module.exports = nextConfig;

src/app/api/send/route.ts

@@ -1,23 +1,43 @@
+import { NextRequest, NextResponse } from "next/server";
 import { Resend } from "resend";
 
-const resend = new Resend(process.env.RESEND_API_KEY);
+import Template from "../../../components/pages/EmailTemplate/index";
 
-export async function POST(request: any) {
-  // Getting data from the form
-  const daata = await request.json();
-  const { email, message } = daata;
+const resend = new Resend(process.env.RESEND_API_KEY);
 
+export async function POST(request: NextRequest) {
   try {
+    const { email, subject, message } = await request.json();
+
+    if (!email || !subject || !message) {
+      return NextResponse.json(
+        {
+          message: "Data missing",
+        },
+        {
+          status: 400,
+        },
+      );
+    }
+
     const data = await resend.emails.send({
-      from: "Palettegram <[email protected]>",
-      to: `${process.env.CONTACT_EMAIL_ID}`,
-      subject: "Contact Form",
-      text: message as string,
-      reply_to: email,
+      from: "Support <[email protected]>",
+      to: [process.env.CONTACT_EMAIL_ID!],
+      subject: `Palettegram Support | ${subject}`,
+      react: Template({ email, message }),
     });
 
-    return Response.json(data);
+    return NextResponse.json(data, {
+      status: 200,
+    });
   } catch (error) {
-    return Response.json({ error });
+    console.log(error);
+
+    return NextResponse.json(
+      { error },
+      {
+        status: 400,
+      },
+    );
   }
 }

src/app/contact/page.tsx

@@ -1,89 +1,5 @@
-"use client";
-import Footer from "@/components/core/footer";
-import Navbar from "@/components/core/navbar";
-import { toastify } from "@/helper/toastify";
-import { FormEvent, useState } from "react";
+import Contact from "@/components/pages/contact";
 
-export default function Contact() {
-  const [message, setmessage] = useState("");
-  const [email, setemail] = useState("");
-  const [ispending, setpending] = useState(false);
-
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    try {
-      setpending(true);
-      const res = await fetch("/api/send", {
-        method: "POST",
-        body: JSON.stringify({
-          email,
-          message,
-        }),
-        headers: {
-          "Content-type": "application/json",
-        },
-      });
-      if (res.status === 200) {
-        toastify("message sent successfully", "success");
-        setpending(false);
-      }
-    } catch (error) {
-      toastify("Please try again later", "error");
-      setpending(false);
-    }
-  };
-
-  return (
-    <>
-      <Navbar />
-
-      <div className="  flex items-center justify-center flex-col">
-        <h1 className=" font-bold text-3xl mt-5"> Contact Us</h1>
-        <form
-          className="mt-10 mb-10 flex flex-col items-center justify-center"
-          onSubmit={handleSubmit}
-        >
-          <input
-            required
-            max={200}
-            type="email"
-            placeholder="Your Email"
-            className=" p-4 w-[60vh] h-10 rounded-2xl  dark:text-white text-black border-2"
-            onChange={(e) => {
-              setemail(e.target.value);
-            }}
-          />
-          <textarea
-            required
-            placeholder="Message"
-            className=" h-52  p-4 rounded-2xl w-[60vh] mt-8 border-2 border-black  dark:text-white text-black"
-            onChange={(e) => {
-              setmessage(e.target.value);
-            }}
-          />
-          {ispending ? (
-            <button
-              className="px-10 py-2 text-base w-[30vh]  mt-8
-           rounded-full text-white bg-primary  transition hover:bg-primary-light hover:scale-105 flex items-center justify-center "
-              disabled
-            >
-              <div className=" h-5 w-5 animate-spin rounded-full border-b-2 border-white dark:border-black"></div>
-            </button>
-          ) : (
-            <button
-              className="px-10 py-2 text-base w-[30vh]  mt-8
-           rounded-full text-white bg-primary  transition hover:bg-primary-light hover:scale-105"
-              type="submit"
-            >
-              Submit
-            </button>
-          )}
-        </form>
-      </div>
-
-      <div className=" bottom-0 fixed w-full">
-        <Footer />
-      </div>
-    </>
-  );
+export default function ContactPage() {
+  return <Contact />;
 }

src/components/pages/EmailTemplate/index.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export default function Template({ email, message }: { email: string; message: string }) {
+  return (
+    <>
+      <div className="bg-pink-100 p-4">
+        <h1 className="text-3xl font-bold">You have received an Email for support</h1>
+        <h3 className="text-2xl font-medium">Sender Email Address: {email}</h3>
+        <h3 className="text-2xl font-medium">User Query:-</h3>
+        <p className="text-2xl font-medium">{message}</p>
+      </div>
+    </>
+  );
+}

src/components/pages/contact/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+import Footer from "@/components/core/footer";
+import Navbar from "@/components/core/navbar";
+import { toastify } from "@/helper/toastify";
+import { ChangeEvent, FormEvent, useState } from "react";
+
+export default function Contact() {
+  const [sendDetails, setSendDetails] = useState({
+    email: "",
+    subject: "",
+    message: "",
+  });
+
+  const [ispending, setpending] = useState(false);
+
+  const updateHandler = (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = event.target;
+
+    setSendDetails((prev) => {
+      return {
+        ...prev,
+        [name]: value,
+      };
+    });
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      setpending(true);
+      const res = await fetch("/api/send", {
+        method: "POST",
+        body: JSON.stringify(sendDetails),
+        headers: {
+          "Content-type": "application/json",
+        },
+      });
+      if (res.status === 200) {
+        toastify("message sent successfully", "success");
+        setpending(false);
+      }
+    } catch (error) {
+      toastify("Please try again later", "error");
+      setpending(false);
+    }
+  };
+
+  return (
+    <>
+      <Navbar />
+
+      <div className="flex items-center justify-center flex-col">
+        <h1 className="font-bold text-3xl mt-5"> Contact Us</h1>
+        <form
+          className="mt-10 mb-10 flex flex-col items-center justify-center"
+          onSubmit={handleSubmit}
+        >
+          <input
+            required
+            type="email"
+            name="email"
+            placeholder="Your Email"
+            className=" p-4 w-[60vh] h-10 rounded-2xl  dark:text-white text-black border-2"
+            onChange={updateHandler}
+          />
+          <input
+            required
+            type="text"
+            name="subject"
+            placeholder="Your the subject"
+            className=" p-4 w-[60vh] h-10 rounded-2xl  dark:text-white text-black border-2"
+            onChange={updateHandler}
+          />
+          <textarea
+            required
+            placeholder="Message"
+            name="message"
+            className=" h-52  p-4 rounded-2xl w-[60vh] mt-8 border-2 border-black  dark:text-white text-black"
+            onChange={updateHandler}
+          />
+          {ispending ? (
+            <button
+              className="px-10 py-2 text-base w-[30vh]  mt-8
+           rounded-full text-white bg-primary  transition hover:bg-primary-light hover:scale-105 flex items-center justify-center "
+              disabled
+            >
+              <div className=" h-5 w-5 animate-spin rounded-full border-b-2 border-white dark:border-black"></div>
+            </button>
+          ) : (
+            <button
+              className="px-10 py-2 text-base w-[30vh]  mt-8
+           rounded-full text-white bg-primary  transition hover:bg-primary-light hover:scale-105"
+              type="submit"
+            >
+              Submit
+            </button>
+          )}
+        </form>
+      </div>
+
+      <div className=" bottom-0 fixed w-full">
+        <Footer />
+      </div>
+    </>
+  );
+}