How to Integrate Lovable with Brevo (Sendinblue)

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8const BREVO_BASE = 'https://api.brevo.com/v3'
9
10serve(async (req) => {
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders })
13  }
14
15  try {
16    const body = await req.json()
17    const { action } = body
18
19    const apiKey = Deno.env.get('BREVO_API_KEY')
20    const senderEmail = Deno.env.get('BREVO_SENDER_EMAIL')
21    const senderName = Deno.env.get('BREVO_SENDER_NAME')
22    const listId = Deno.env.get('BREVO_LIST_ID')
23
24    if (!apiKey || !senderEmail || !senderName) {
25      throw new Error('Missing required secrets: BREVO_API_KEY, BREVO_SENDER_EMAIL, BREVO_SENDER_NAME')
26    }
27
28    const brevoHeaders = {
29      'api-key': apiKey,
30      'Content-Type': 'application/json',
31      Accept: 'application/json',
32    }
33
34    if (action === 'send-email') {
35      const { to, toName = '', subject, htmlContent, textContent } = body
36      if (!to || !subject || (!htmlContent && !textContent)) {
37        throw new Error('send-email requires: to, subject, and htmlContent or textContent')
38      }
39
40      const payload = {
41        sender: { name: senderName, email: senderEmail },
42        to: [{ email: to, name: toName }],
43        subject,
44        ...(htmlContent ? { htmlContent } : { textContent }),
45      }
46
47      const res = await fetch(`${BREVO_BASE}/smtp/email`, {
48        method: 'POST',
49        headers: brevoHeaders,
50        body: JSON.stringify(payload),
51      })
52      const data = await res.json()
53      if (!res.ok) throw new Error(`Brevo send error: ${JSON.stringify(data)}`)
54
55      return new Response(
56        JSON.stringify({ success: true, messageId: data.messageId }),
57        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
58      )
59    }
60
61    if (action === 'add-contact') {
62      const { email, firstName = '', lastName = '' } = body
63      if (!email) throw new Error('add-contact requires: email')
64
65      const payload: Record<string, unknown> = {
66        email,
67        attributes: { FIRSTNAME: firstName, LASTNAME: lastName },
68        updateEnabled: true,
69      }
70      if (listId) {
71        payload.listIds = [parseInt(listId, 10)]
72      }
73
74      const res = await fetch(`${BREVO_BASE}/contacts`, {
75        method: 'POST',
76        headers: brevoHeaders,
77        body: JSON.stringify(payload),
78      })
79      const data = await res.json()
80      // 204 means existing contact was updated (no body)
81      if (!res.ok && res.status !== 204) {
82        throw new Error(`Brevo contact error: ${JSON.stringify(data)}`)
83      }
84
85      return new Response(
86        JSON.stringify({ success: true, id: data.id || null }),
87        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
88      )
89    }
90
91    throw new Error(`Unknown action: ${action}. Use 'send-email' or 'add-contact'.`)
92  } catch (error) {
93    return new Response(
94      JSON.stringify({ error: error.message }),
95      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
96    )
97  }
98})

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { toast } from '@/components/ui/use-toast'
6
7export const BrevoSignup = () => {
8  const [email, setEmail] = useState('')
9  const [firstName, setFirstName] = useState('')
10  const [loading, setLoading] = useState(false)
11  const [done, setDone] = useState(false)
12
13  const invoke = (body: Record<string, unknown>) =>
14    supabase.functions.invoke('brevo-email', { body })
15
16  const handleSubmit = async (e: React.FormEvent) => {
17    e.preventDefault()
18    setLoading(true)
19    try {
20      const welcomeHtml = `<h2>Welcome, ${firstName || 'there'}!</h2><p>Thanks for signing up. We are excited to have you.</p>`
21
22      const [contactRes, emailRes] = await Promise.all([
23        invoke({ action: 'add-contact', email, firstName }),
24        invoke({
25          action: 'send-email',
26          to: email,
27          toName: firstName,
28          subject: 'Welcome! You are on the list.',
29          htmlContent: welcomeHtml,
30        }),
31      ])
32
33      if (contactRes.error) throw contactRes.error
34      if (emailRes.error) throw emailRes.error
35
36      setDone(true)
37    } catch (err) {
38      toast({
39        title: 'Something went wrong',
40        description: 'Please try again or contact support.',
41        variant: 'destructive',
42      })
43    } finally {
44      setLoading(false)
45    }
46  }
47
48  if (done) {
49    return (
50      <div className="text-center py-6">
51        <p className="font-semibold text-lg">You're in!</p>
52        <p className="text-muted-foreground">Check your inbox for a welcome email.</p>
53      </div>
54    )
55  }
56
57  return (
58    <form onSubmit={handleSubmit} className="flex flex-col gap-3 max-w-sm">
59      <Input placeholder="First name" value={firstName} onChange={(e) => setFirstName(e.target.value)} />
60      <Input type="email" placeholder="Email address" value={email} onChange={(e) => setEmail(e.target.value)} required />
61      <Button type="submit" disabled={loading}>
62        {loading ? 'Signing up...' : 'Get Started'}
63      </Button>
64    </form>
65  )
66}