added SG integration

app/api/send-verification/route.ts

@@ -0,0 +1,36 @@
+import { NextResponse } from 'next/server'
+import Sendgrid from '@sendgrid/mail'
+
+export async function POST(request: Request) {
+  try {
+    const { email, code } = await request.json()
+
+    if (!email || !code) {
+      return NextResponse.json(
+        { error: 'Email and code are required' },
+        { status: 400 }
+      )
+    }
+
+    Sendgrid.setApiKey(process.env.SENDGRID_API_KEY as string)
+
+    const msg = {
+      to: email,
+      from: '[email protected]', // Replace with your verified sender
+      templateId: 'd-070a0738fac147eb878f87b86eed664c',
+      dynamicTemplateData: {
+        VCODE: code
+      }
+    }
+
+    await Sendgrid.send(msg)
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Error sending email:', error)
+    return NextResponse.json(
+      { error: 'Failed to send verification email' },
+      { status: 500 }
+    )
+  }
+} 

app/signup/page.tsx

@@ -63,8 +63,12 @@ export default function Component() {
     switch (currentStep) {
       case RegistrationStep.EnterContact:
         return (
-          <form onSubmit={(e) => {
+          <form onSubmit={async (e) => {
             e.preventDefault()
+            const code = generateVerificationCode();
+            setGeneratedCode(code);
+            setVerificationCode(code);
+
             if (!isEmail(contact)) {
               if (!contact.startsWith('+92')) {
                 toast({
@@ -75,10 +79,36 @@ export default function Component() {
                 return
               }
               setPhone(contact)
+            } else {
+              try {
+                const response = await fetch('/api/send-verification', {
+                  method: 'POST',
+                  headers: {
+                    'Content-Type': 'application/json',
+                  },
+                  body: JSON.stringify({
+                    email: contact,
+                    code: code,
+                  }),
+                });
+
+                if (!response.ok) {
+                  throw new Error('Failed to send verification email');
+                }
+
+                toast({
+                  title: "Success",
+                  description: "Verification code sent to your email",
+                });
+              } catch (error) {
+                toast({
+                  variant: "destructive",
+                  title: "Error",
+                  description: "Failed to send verification email. Please try again.",
+                });
+                return;
+              }
             }
-            const code = generateVerificationCode();
-            setGeneratedCode(code);
-            setVerificationCode(code);
             setCurrentStep(currentStep + 1)
           }}>
             <div className="space-y-4">

package.json

@@ -20,6 +20,7 @@
     "@radix-ui/react-scroll-area": "^1.2.0",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-toast": "^1.2.2",
+    "@sendgrid/mail": "^8.1.4",
     "@supabase/supabase-js": "^2.46.1",
     "class-variance-authority": "^0.4.0",
     "clsx": "^1.2.1",