added vercel analytics and promise done

lakshaybhushan · Jun 23, 2024 · 3303c43 · 3303c43
1 parent 35f8333
commit 3303c43
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 37 deletions.
diff --git a/app/api/mail/route.ts b/app/api/mail/route.ts
@@ -38,9 +38,10 @@ export async function POST(request: NextRequest, response: NextResponse) {
   const { email, firstname } = await request.json()
 
   const { data, error } = await resend.emails.send({
-    from: "Lakshay <hello@m2j.lakshb.dev>",
+    from: "Join <join@m2j.lakshb.dev>",
     to: [email],
     subject: "Thankyou for waitlisting morph2json!",
+    reply_to: "[email protected]",
     html: render(WelcomeTemplate({ userFirstname: firstname })),
   })
 

diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import "./globals.css"
 import type { Metadata } from "next"
 import { Figtree } from "next/font/google"
 import { Toaster } from "@/components/ui/sonner"
+import { Analytics } from "@vercel/analytics/react"
 
 const FigtreeFont = Figtree({ subsets: ["latin"] })
 
@@ -22,6 +23,7 @@ export default function RootLayout({
       <body className={FigtreeFont.className}>
         {children}
         <Toaster richColors position="top-center" />
+        <Analytics />
       </body>
     </html>
   )

diff --git a/app/page.tsx b/app/page.tsx
@@ -15,6 +15,7 @@ import AnimatedShinyText from "@/components/ui/shimmer-text"
 export default function Home() {
   const [name, setName] = useState<string>("")
   const [email, setEmail] = useState<string>("")
+  const [loading, setLoading] = useState<boolean>(false)
 
   const handleEmailChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(event.target.value)
@@ -40,34 +41,50 @@ export default function Home() {
       return
     }
 
-    try {
-      const notionResponse = await fetch("/api/notion/waitlist", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ name, email }),
-      })
-
-      const mailResponse = await fetch("/api/mail", {
-        cache: "no-store",
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ firstname: name, email }),
-      })
-
-      if (notionResponse.ok && mailResponse.ok) {
-        toast.success("Thank you for joining morph2json's waitlist! 🎉")
+    setLoading(true)
+
+    const promise = new Promise(async (resolve, reject) => {
+      try {
+        const notionResponse = await fetch("/api/notion/waitlist", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ name, email }),
+        })
+
+        const mailResponse = await fetch("/api/mail", {
+          cache: "no-store",
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({ firstname: name, email }),
+        })
+
+        if (notionResponse.ok && mailResponse.ok) {
+          resolve({ name })
+        } else {
+          reject(new Error("Failed to add to the waitlist"))
+        }
+      } catch (error) {
+        reject(error)
+      }
+    })
+
+    toast.promise(promise, {
+      loading: "Getting you on the waitlist... 🚀",
+      success: (data) => {
         setName("")
         setEmail("")
-      } else {
-        toast.error("Failed to add to you to the waitlist 😢.")
-      }
-    } catch (error) {
-      toast.error("An error occurred. Please try again 😢.")
-    }
+        return "Thank you for joining morph2json's waitlist! 🎉"
+      },
+      error: "An error occurred. Please try again 😢.",
+    })
+
+    promise.finally(() => {
+      setLoading(false)
+    })
   }
 
   const containerVariants = {
@@ -160,8 +177,9 @@ export default function Home() {
             Icon={FaArrowRightLong}
             onClick={handleSubmit}
             iconPlacement="right"
-            className="w-full mt-2">
-            Join Waitlist!
+            className="w-full mt-2"
+            disabled={loading}>
+            {loading ? "Loading..." : "Join Waitlist!"}
           </EnhancedButton>
         </motion.div>
         <motion.div

diff --git a/bun.lockb b/bun.lockb
diff --git a/emails/index.tsx b/emails/index.tsx
@@ -29,27 +29,29 @@ export const morph2jsonWaitlistEmail = ({
           alt="morph2json logo"
           style={logo}
         />
-        <Text style={paragraph}>Hey! {userFirstname},</Text>
+        <Text style={paragraph}>Hi {userFirstname},</Text>
         <Text style={paragraph}>
-          Thank you so much for joining the waitlist for morph2json. Your
-          support means a lot to me. I am dedicated to making morph2json the
-          best tool for your requirements. I will update you on the progress and
-          let you know as soon as it is ready for you to use.
+          Thanks for joining the waitlist for morph2json! I'm Lakshay, the
+          developer working on this tool. I'm excited you're interested and I'm
+          putting in the effort to make morph2json as useful as possible for
+          you.
         </Text>
 
         <Text style={paragraph}>
-          If you have any questions or feedback, feel free to reply to{" "}
+          I'll keep you updated on progress and let you know the second it's
+          ready to use. If you have any questions or feedback, feel free to
+          reply directly to{" "}
           <a
             href="mailto:
           [email protected]"
             style={{ color: "#F7FF9B" }}>
             this email
           </a>
-          . I'd love to hear from you.
+          — I'm all ears!
         </Text>
 
         <Text style={paragraph}>
-          Make sure to follow me on X/Twitter for the updates{" "}
+          For updates, you can also follow me on X/Twitter: {""}
           <a href="https://x.com/blakssh" style={{ color: "#F7FF9B" }}>
             @blakssh
           </a>

diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@svgr/webpack": "^8.1.0",
     "@upstash/ratelimit": "^1.2.1",
     "@upstash/redis": "^1.31.6",
+    "@vercel/analytics": "^1.3.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.396.0",