feat(feedback): implement feedback form and notification system with discord integration

Author: tyronejosee

.env.example

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_SUPABASE_URL=<url>
 NEXT_PUBLIC_SUPABASE_ANON_KEY=<anon_key>
+DISCORD_WEBHOOK_URL=<url>

src/app/(public)/feedback/page.tsx

@@ -2,22 +2,21 @@ import type { Metadata } from "next";
 
 import { Heading } from "@/components/ui";
 import { PROJECT_NAME } from "@/config/constants";
+import { FeedbackForm } from "@/components/feedback";
 
 export const metadata: Metadata = {
   title: `Feedback - ${PROJECT_NAME}`,
-  description: "Share your feedback with us",
+  description: "Have a question? We will be happy to help you.",
 };
 
 export default function FeedbackPage() {
   return (
-    <main className="max-w-screen-xl mx-auto p-4">
-      <Heading title="Feedback" subtitle="Share your feedback with us" />
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae tenetur
-        itaque tempora. Nostrum ut architecto libero! Quasi, iure placeat
-        doloribus tenetur ullam veniam esse vero nemo! Molestias inventore velit
-        praesentium!
-      </p>
+    <main className="max-w-lg mx-auto p-4">
+      <Heading
+        title="Feedback"
+        subtitle="Have a question? We will be happy to help you."
+      />
+      <FeedbackForm />
     </main>
   );
 }

src/app/api/messages/route.ts

@@ -0,0 +1,20 @@
+import { NextResponse } from "next/server";
+import { messageNotifier } from "@/lib/observer";
+import { DiscordObserver } from "@/lib/dicord";
+
+export async function POST(req: Request) {
+  try {
+    messageNotifier.subscribe(DiscordObserver);
+
+    const data = await req.json();
+    await messageNotifier.notify(data);
+
+    return NextResponse.json({ message: "Notification sent" });
+  } catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: "Error processing the request" },
+      { status: 500 },
+    );
+  }
+}

src/components/feedback/feedback-form.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import type { FeedbackForm as FeedbackFormType } from "@/types";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Input, Textarea, Button, addToast } from "@heroui/react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { feedbackSchema } from "@/lib/zod";
+import { HOME_PATH } from "@/config/constants";
+
+export default function FeedbackForm() {
+  const router = useRouter();
+  const [apiError, setApiError] = useState<string | null>(null);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<FeedbackFormType>({
+    resolver: zodResolver(feedbackSchema),
+  });
+
+  const onSubmit = async (data: FeedbackFormType) => {
+    try {
+      const response = await fetch("/api/messages", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(data),
+      });
+
+      if (!response.ok) throw new Error("Failed to send message");
+
+      addToast({
+        title: "Thank you for your feedback!",
+        description:
+          "We appreciate your feedback and will use it to continuously improve. Your opinion is valuable to us.",
+      });
+
+      reset();
+      router.push(HOME_PATH);
+    } catch (error) {
+      console.error(error);
+      setApiError("There was a problem submitting the form.");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="py-4 space-y-8">
+      <Input
+        size="sm"
+        type="text"
+        label="Name"
+        labelPlacement="outside"
+        placeholder="Joe Doe"
+        isInvalid={!!errors.name?.message}
+        color={errors.name?.message ? "danger" : "default"}
+        errorMessage={errors.name?.message}
+        {...register("name")}
+      />
+      <Input
+        size="sm"
+        type="email"
+        label="Email"
+        labelPlacement="outside"
+        placeholder="you@example.com"
+        isInvalid={!!errors.email?.message}
+        color={errors.email?.message ? "danger" : "default"}
+        errorMessage={errors.email?.message}
+        {...register("email")}
+      />
+      <Textarea
+        size="sm"
+        type="textarea"
+        label="Message"
+        labelPlacement="outside"
+        placeholder="Your message here..."
+        classNames={{ base: "!mt-2" }}
+        isInvalid={!!errors.message?.message}
+        color={errors.message?.message ? "danger" : "default"}
+        errorMessage={errors.message?.message}
+        {...register("message")}
+      />
+      {apiError && <p className="text-red-500">{apiError}</p>}
+      <div className="flex justify-start gap-2">
+        <Button
+          size="sm"
+          type="submit"
+          disabled={isSubmitting}
+          className="bg-neutral-950 dark:bg-white text-white dark:text-neutral-950 font-medium"
+        >
+          {isSubmitting ? "Sending..." : "Send"}
+        </Button>
+      </div>
+    </form>
+  );
+}

src/components/feedback/index.ts

@@ -0,0 +1 @@
+export { default as FeedbackForm } from "./feedback-form";

src/lib/dicord.ts

@@ -0,0 +1,17 @@
+import { Observer } from "./observer";
+
+const DISCORD_WEBHOOK_URL = process.env.DISCORD_WEBHOOK_URL!;
+
+export const DiscordObserver: Observer = {
+  async update(data) {
+    const name = `# ${data["name"]}\n\n`;
+    const email = `- Email: ${data["email"]}\n`;
+    const message = `- Message: ${data["message"]}`;
+
+    await fetch(DISCORD_WEBHOOK_URL, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content: `${name}${email}${message}` }),
+    });
+  },
+};

src/lib/observer.ts

@@ -0,0 +1,23 @@
+import { FeedbackForm } from "@/types";
+
+export type Observer = {
+  update: (data: FeedbackForm) => Promise<void>;
+};
+
+class Subject {
+  private observers: Observer[] = [];
+
+  subscribe(observer: Observer) {
+    this.observers.push(observer);
+  }
+
+  unsubscribe(observer: Observer) {
+    this.observers = this.observers.filter((obs) => obs !== observer);
+  }
+
+  async notify(data: FeedbackForm) {
+    await Promise.all(this.observers.map((observer) => observer.update(data)));
+  }
+}
+
+export const messageNotifier = new Subject();