Add mailing list feature

components/Landing.js

@@ -1,4 +1,5 @@
 import CardsLanding from "components/CardsLanding";
+import MailingList from "./MailingList";
 
 const Landing = () => {
   return (
@@ -16,11 +17,9 @@ const Landing = () => {
       </div>
       <CardsLanding />
       <div>
-        <div className='max-w-2xl m-auto mt-10'>
-          <h2 className='text-5xl md:text-5xl font-bold font-title'>
-            Available soon
-          </h2>
-          <p className='text-xl max-w-lg text-center m-auto leading-9'>
+        <div className='max-w-3xl m-auto my-10'>
+          <h2 className='text-3xl font-semibold font-title'>Available soon</h2>
+          <p className='text-lg max-w-lg text-center m-auto leading-9'>
             You will save{" "}
             <span className='text-accent text-2xl font-bold underline'>
               weeks
@@ -29,6 +28,8 @@ const Landing = () => {
             website is built with it!
           </p>
         </div>
+        <hr />
+        <MailingList />
       </div>
     </div>
   );

components/MailingList.js

@@ -0,0 +1,57 @@
+import axios from "axios";
+import { toast } from "react-toastify";
+import { useState } from "react";
+
+const MailingList = () => {
+  const [mail, setMail] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const subscribe = () => {
+    setLoading(true);
+    axios
+      .put("api/mailingList", {
+        mail,
+      })
+      .then((result) => {
+        if (result.status === 200) {
+          toast.success(result.data.message);
+          setLoading(false);
+        }
+      })
+      .catch((err) => {
+        console.log(err);
+        setLoading(false);
+      });
+  };
+  return (
+    <div className='my-10'>
+      <h2 className='text-3xl md:text-3xl font-semibold font-title'>
+        Stay Tuned!
+      </h2>
+      <label className='label'>
+        <p className='text-lg max-w-xl text-center m-auto leading-9'>
+          Want to be the first to know when SupaNexTail launches and get an
+          exclusive discount? Sign up for the newsletter!
+        </p>
+      </label>
+      <div className='mt-5'>
+        <input
+          onChange={(e) => {
+            setMail(e.target.value);
+          }}
+          type='text'
+          placeholder='Your email'
+          className='input input-primary input-bordered'></input>
+        <button
+          onClick={subscribe}
+          className={`btn ml-3 ${
+            loading ? "btn-disabled loading" : "btn-primary"
+          }`}>
+          I'm in!
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default MailingList;

env.local.example

@@ -5,6 +5,7 @@ NEXT_PUBLIC_TITLE="SupaNexTail"
 SENDGRID_MAILTO=YOUR_RECIPIENT
 SENDGRID_MAILFROM=YOUR_VERIFIED_SENDER
 SENDGRID_SECRET=YOUR_SENGRID_SECRET
+SENDGRID_MAILING_ID=YOUR_MAILING_LIST_ID
 
 # STRIPE
 STRIPE_WEBHOOK=YOUR_STRIPE_WEBHOOK

pages/api/mailingList.js

@@ -0,0 +1,60 @@
+import Cors from "cors";
+import axios from "axios";
+import initMiddleware from "utils/init-middleware";
+
+const rateLimit = require("express-rate-limit");
+
+export const config = {
+  api: {
+    externalResolver: true,
+  },
+};
+
+const cors = initMiddleware(
+  Cors({
+    methods: ["PUT"],
+  })
+);
+
+const limiter = initMiddleware(
+  rateLimit({
+    windowMs: 30000, // 30sec
+    max: 2, // Max 2 request per 30 sec
+  })
+);
+
+export default async function handler(req, res) {
+  await cors(req, res);
+  await limiter(req, res);
+  if (req.method === "PUT") {
+    axios
+      .put(
+        "https://api.sendgrid.com/v3/marketing/contacts",
+        {
+          contacts: [{ email: `${req.body.mail}` }],
+          list_ids: [process.env.SENDGRID_MAILING_ID],
+        },
+        {
+          headers: {
+            "content-type": "application/json",
+            Authorization: `Bearer ${process.env.SENDGRID_SECRET}`,
+          },
+        }
+      )
+      .then((result) => {
+        console.log(result);
+        res
+          .status(200)
+          .send({
+            message:
+              "Your email has been succesfully added to the mailing list. Welcome 👋",
+          });
+      })
+      .catch((err) => {
+        res.status(500).send({
+          message:
+            "Oups, there was a problem with your subscription, please try again or contact us",
+        });
+      });
+  }
+}