Merge pull request #225 from CodeChefVIT/subscribe-to-newsletter-button

Subscribe to newsletter button

Author: abhitrueprogrammer

.env.example

@@ -25,4 +25,8 @@ KV_URL=""
 KV_REST_API_URL=""
 KV_REST_API_TOKEN=""
 KV_REST_API_READ_ONLY_TOKEN=""
-SERVER_URL=""
+SERVER_URL=""
+# Google Sheets Integration
+GOOGLE_CLIENT_EMAIL=""
+GOOGLE_PRIVATE_KEY=""
+SHEET_ID=""

.gitignore

@@ -34,6 +34,7 @@ yarn-error.log*
 # local env files
 # do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
 .env
+.env.lcal
 .env*.local
 
 # vercel

src/app/api/subscribe/route.ts

@@ -0,0 +1,47 @@
+import { NextResponse } from "next/server";
+import { google, sheets_v4 } from "googleapis";
+import { JWT } from "google-auth-library";
+
+const SCOPES = ["https://www.googleapis.com/auth/spreadsheets"];
+const SHEET_ID = process.env.SHEET_ID;
+
+async function getAuth(): Promise<JWT> {
+  return new google.auth.JWT({
+    email: process.env.GOOGLE_CLIENT_EMAIL,
+    key: process.env.GOOGLE_PRIVATE_KEY?.replace(/\\n/g, "\n"),
+    scopes: SCOPES,
+  });
+}
+
+async function appendEmailToSheet(email: string) {
+  const authClient = await getAuth();
+  const sheets: sheets_v4.Sheets = google.sheets({
+    version: "v4",
+    auth: authClient,
+  });
+
+  await sheets.spreadsheets.values.append({
+    spreadsheetId: SHEET_ID,
+    range: "Sheet1!A:A",
+    valueInputOption: "RAW",
+    requestBody: {
+      values: [[email]],
+    },
+  });
+}
+
+export async function POST(req: Request) {
+  try {
+    const { email } = await req.json();
+
+    if (!email) {
+      return NextResponse.json({ error: "Email is required" }, { status: 400 });
+    }
+
+    await appendEmailToSheet(email);
+    return NextResponse.json({ message: "Email added successfully" });
+  } catch (error) {
+    console.error("Error adding email:", error);
+    return NextResponse.json({ error: "Failed to add email" }, { status: 500 });
+  }
+}

src/components/Footer.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { useTheme } from "next-themes";
 import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
+import { Input } from "@/components/ui/input";
 import {
   FaFacebook,
   FaGithub,
@@ -13,16 +14,40 @@ import {
   FaYoutube,
 } from "react-icons/fa6";
 import { Mail } from "lucide-react";
-
+import toast from "react-hot-toast";
 export default function Footer() {
   const { theme } = useTheme();
   const [isDarkMode, setIsDarkMode] = useState<boolean | null>(true);
-
+  const [email, setEmail] = useState("");
   useEffect(() => {
     if (theme) {
       setIsDarkMode(theme === "dark");
     }
   }, [theme]);
+  const handleSubscribe = async () => {
+    if (!email || !email.includes("@")) {
+      toast.error("Please Enter A Valid Email.");
+      return;
+    }
+
+    await toast.promise(
+      fetch("/api/subscribe", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email }),
+      }).then((res) => {
+        if (!res.ok) throw new Error("Network response was not ok.");
+        return res.json();
+      }),
+      {
+        loading: "Subscribing...",
+        success: "You've Successfully Subscribed!",
+        error: "Something went wrong. Try again later.",
+      }
+    );
+
+    setEmail("");
+  };
 
   return (
     <footer className="w-full overflow-hidden bg-gradient-to-b from-[#F3F5FF] to-[#A599CE] px-12 py-12 font-sans text-white dark:from-[#070114] dark:to-[#1F0234]">
@@ -95,9 +120,31 @@ export default function Footer() {
           >
             <Mail /> [email protected]
           </Link>
+
+          <div className="mt-4 flex flex-col gap-2 w-full max-w-xs">
+            <h3 htmlFor="email" className="font-jost text-2xl font-semibold">
+              Subscribe For Updates:
+            </h3>
+            <div className="relative w-full">
+              <Input
+                id="email"
+                type="email"
+                placeholder="Enter Your Email"
+                className="pr-24"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+              />
+              <Button
+                onClick={handleSubscribe}
+                className="absolute right-0 top-0 h-full rounded-l-none rounded-r-md bg-[#562EE7] px-4 text-white hover:bg-[#4531b3]"
+              >
+                Subscribe!
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
-      <p className="font-play mt-4 border-t border-[#130E1F] pt-12 text-center text-lg text-black dark:border-white/10 dark:text-white">
+      <p className="font-play mt-8 border-t border-[#130E1F] pt-12 text-center text-lg text-black dark:border-white/10 dark:text-white">
         Made with ❤️ by Codechef-VIT
       </p>
     </footer>