feat: implement contact form and Chatwoot widget

Add Resend API-based contact form and Chatwoot widget integration. Co-authored-by: ASOwnerYT <[email protected]>
2026-03-20 00:45:35 +00:00
parent 39daf41b93
commit 21d4c5f579
4 changed files with 168 additions and 11 deletions
@@ -0,0 +1,86 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { name, email, message } = await request.json();
+
+    // Validate inputs
+    if (!name || !email || !message) {
+      return NextResponse.json(
+        { error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+
+    // Validate email format
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { error: 'Invalid email address' },
+        { status: 400 }
+      );
+    }
+
+    const resendApiKey = process.env.RESEND_API_KEY;
+    if (!resendApiKey) {
+      console.error('[v0] RESEND_API_KEY not configured');
+      return NextResponse.json(
+        { error: 'Email service not configured' },
+        { status: 500 }
+      );
+    }
+
+    // Send email via Resend
+    const response = await fetch('https://api.resend.com/emails', {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${resendApiKey}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        from: 'Cloudrite Contact Form <[email protected]>',
+        to: '[email protected]',
+        replyTo: email,
+        subject: `New Contact Form Submission from ${name}`,
+        html: `
+          <h2>New Contact Form Submission</h2>
+          <p><strong>Name:</strong> ${escapeHtml(name)}</p>
+          <p><strong>Email:</strong> ${escapeHtml(email)}</p>
+          <p><strong>Message:</strong></p>
+          <p>${escapeHtml(message).replace(/\n/g, '<br>')}</p>
+        `,
+      }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json();
+      console.error('[v0] Resend API error:', error);
+      return NextResponse.json(
+        { error: 'Failed to send email' },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(
+      { success: true, message: 'Email sent successfully' },
+      { status: 200 }
+    );
+  } catch (error) {
+    console.error('[v0] Email route error:', error);
+    return NextResponse.json(
+      { error: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}
+
+function escapeHtml(text: string): string {
+  const map: { [key: string]: string } = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#039;',
+  };
+  return text.replace(/[&<>"']/g, (char) => map[char]);
+}
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Space_Grotesk, Inter } from 'next/font/google'
 import { Analytics } from '@vercel/analytics/next'
+import { ChatwootWidget } from '@/components/chatwoot'
 import './globals.css'

 const spaceGrotesk = Space_Grotesk({ 
@@ -45,6 +46,7 @@ export default function RootLayout({
      <body className={`${spaceGrotesk.variable} ${inter.variable} font-sans antialiased`}>
        {children}
        <Analytics />
+        <ChatwootWidget />
      </body>
    </html>
  )
@@ -0,0 +1,42 @@
+'use client'
+
+import { useEffect } from 'react'
+
+export function ChatwootWidget() {
+  useEffect(() => {
+    const chatwootToken = process.env.NEXT_PUBLIC_CHATWOOT_ACCOUNT_TOKEN
+
+    if (!chatwootToken) {
+      console.warn('[v0] Chatwoot account token not configured')
+      return
+    }
+
+    // Load Chatwoot widget script
+    const script = document.createElement('script')
+    script.src = 'https://app.chatwoot.com/packs/js/sdk.js'
+    script.async = true
+
+    script.onload = () => {
+      // Initialize Chatwoot after script loads
+      if ((window as any).chatwootSDK) {
+        ;(window as any).chatwootSDK.run({
+          websiteToken: chatwootToken,
+          baseUrl: 'https://app.chatwoot.com'
+        })
+      }
+    }
+
+    script.onerror = () => {
+      console.error('[v0] Failed to load Chatwoot widget')
+    }
+
+    document.body.appendChild(script)
+
+    return () => {
+      // Cleanup is handled by Chatwoot itself
+      // Don't remove the script as it manages its own lifecycle
+    }
+  }, [])
+
+  return null
+}
@@ -3,7 +3,7 @@
 import { useState } from "react"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Mail, Phone, MapPin, Send, ArrowRight } from "lucide-react"
+import { Mail, Phone, MapPin, Send, ArrowRight, AlertCircle } from "lucide-react"

 export function Contact() {
  const [formData, setFormData] = useState({
@@ -13,20 +13,39 @@ export function Contact() {
  })
  const [isSubmitting, setIsSubmitting] = useState(false)
  const [isSubmitted, setIsSubmitted] = useState(false)
+  const [error, setError] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setIsSubmitting(true)
+    setError("")
    
-    // Simulate form submission
-    await new Promise(resolve => setTimeout(resolve, 1500))
+    try {
+      const response = await fetch('/api/send-email', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(formData),
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json()
+        throw new Error(errorData.error || 'Failed to send message')
+      }

-    setIsSubmitting(false)
      setIsSubmitted(true)
      setFormData({ name: "", email: "", message: "" })
      
      // Reset success message after 5 seconds
      setTimeout(() => setIsSubmitted(false), 5000)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'An unexpected error occurred'
+      setError(errorMessage)
+      console.error('[v0] Form submission error:', err)
+    } finally {
+      setIsSubmitting(false)
+    }
  }

  const contactInfo = [
@@ -129,6 +148,13 @@ export function Contact() {
                  </p>
                </div>
              ) : (
+                <>
+                  {error && (
+                    <div className="mb-6 p-4 bg-destructive/10 border border-destructive/50 rounded-lg flex items-center gap-3">
+                      <AlertCircle className="w-5 h-5 text-destructive flex-shrink-0" />
+                      <p className="text-sm text-destructive">{error}</p>
+                    </div>
+                  )}
                  <form onSubmit={handleSubmit} className="space-y-6">
                  <div className="space-y-2">
                    <label htmlFor="name" className="text-sm font-medium">
@@ -193,6 +219,7 @@ export function Contact() {
                    )}
                  </Button>
                </form>
+                </>
              )}
            </div>
          </div>