feat:added back-end for subscription box

Inputs signed up emails into google sheet

Author: shikhar-sahay

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

@@ -29,23 +29,26 @@ export default function Footer() {
       toast.error("Please Enter A Valid Email.");
       return;
     }
-  
-    const fakeSubscribe = () =>
-      new Promise((resolve, reject) => {
-        setTimeout(() => {
-          resolve("Subscribed");
-        }, 1500);
-      });
-  
-    toast.promise(fakeSubscribe(), {
-      loading: "Subscribing...",
-      success: "You've Successfully Subscribed!",
-      error: "Something Went Wrong. Please Try Again.",
-    });
-  
+
+    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]">
       <div className="mx-auto flex max-w-[1440px] flex-col gap-y-4 lg:flex-row lg:justify-between">