How to Integrate Lovable with GetResponse

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 BASE = 'https://api.getresponse.com/v3'
9
10serve(async (req) => {
11  if (req.method === 'OPTIONS') {
12    return new Response('ok', { headers: corsHeaders })
13  }
14
15  try {
16    const { email, firstName = '', lastName = '' } = await req.json()
17
18    const apiKey = Deno.env.get('GETRESPONSE_API_KEY')
19    const listId = Deno.env.get('GETRESPONSE_LIST_ID')
20    const webinarId = Deno.env.get('GETRESPONSE_WEBINAR_ID')
21
22    if (!apiKey || !listId) {
23      throw new Error('Missing required secrets: GETRESPONSE_API_KEY and GETRESPONSE_LIST_ID')
24    }
25    if (!email || !email.includes('@')) {
26      return new Response(
27        JSON.stringify({ error: 'A valid email address is required' }),
28        { status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
29      )
30    }
31
32    const authHeader = { 'X-Auth-Token': `api-key ${apiKey}`, 'Content-Type': 'application/json' }
33    const fullName = [firstName, lastName].filter(Boolean).join(' ') || email.split('@')[0]
34
35    // Step 1: Add contact to the list
36    const contactPayload = {
37      email,
38      name: fullName,
39      campaign: { campaignId: listId },
40      dayOfCycle: '0',
41    }
42
43    const contactRes = await fetch(`${BASE}/contacts`, {
44      method: 'POST',
45      headers: authHeader,
46      body: JSON.stringify(contactPayload),
47    })
48
49    let contactMessage = 'Contact added successfully'
50    if (!contactRes.ok) {
51      const contactError = await contactRes.json().catch(() => ({}))
52      // 409 = contact already exists
53      if (contactRes.status === 409) {
54        contactMessage = 'Contact already exists in list'
55      } else {
56        throw new Error(`GetResponse contact error ${contactRes.status}: ${JSON.stringify(contactError)}`)
57      }
58    }
59
60    // Step 2: Register for webinar (optional)
61    let webinarMessage = ''
62    if (webinarId) {
63      const webinarPayload = { email, name: fullName }
64      const webinarRes = await fetch(`${BASE}/webinars/${webinarId}/registrants`, {
65        method: 'POST',
66        headers: authHeader,
67        body: JSON.stringify(webinarPayload),
68      })
69      if (!webinarRes.ok) {
70        const webinarError = await webinarRes.json().catch(() => ({}))
71        // Log but don't fail the whole operation
72        console.error('Webinar registration error:', JSON.stringify(webinarError))
73        webinarMessage = 'Webinar registration failed — contact was still added to list'
74      } else {
75        const webinarData = await webinarRes.json()
76        webinarMessage = `Registered for webinar. Join URL: ${webinarData.joinUrl || 'see email'}`
77      }
78    }
79
80    return new Response(
81      JSON.stringify({
82        success: true,
83        contactMessage,
84        webinarMessage: webinarMessage || undefined,
85      }),
86      { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
87    )
88  } catch (error) {
89    return new Response(
90      JSON.stringify({ error: error.message }),
91      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
92    )
93  }
94})

1import { useState } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Input } from '@/components/ui/input'
5import { Label } from '@/components/ui/label'
6import { toast } from '@/components/ui/use-toast'
7
8export const WebinarRegistration = () => {
9  const [email, setEmail] = useState('')
10  const [firstName, setFirstName] = useState('')
11  const [loading, setLoading] = useState(false)
12  const [registered, setRegistered] = useState(false)
13
14  const handleSubmit = async (e: React.FormEvent) => {
15    e.preventDefault()
16    setLoading(true)
17    try {
18      const { data, error } = await supabase.functions.invoke('getresponse-subscribe', {
19        body: { email, firstName },
20      })
21      if (error) throw error
22      setRegistered(true)
23    } catch (err) {
24      toast({
25        title: 'Registration failed',
26        description: 'Please check your details and try again.',
27        variant: 'destructive',
28      })
29    } finally {
30      setLoading(false)
31    }
32  }
33
34  if (registered) {
35    return (
36      <div className="text-center space-y-3 py-8">
37        <p className="text-2xl">✓ You're registered!</p>
38        <p className="text-muted-foreground">Check your inbox for the webinar access link and calendar invite.</p>
39      </div>
40    )
41  }
42
43  return (
44    <form onSubmit={handleSubmit} className="space-y-4 max-w-sm mx-auto">
45      <div>
46        <Label htmlFor="firstName">First Name *</Label>
47        <Input id="firstName" value={firstName} onChange={(e) => setFirstName(e.target.value)} placeholder="Your first name" required />
48      </div>
49      <div>
50        <Label htmlFor="email">Email *</Label>
51        <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required />
52      </div>
53      <Button type="submit" disabled={loading} className="w-full">
54        {loading ? 'Registering...' : 'Reserve My Spot'}
55      </Button>
56    </form>
57  )
58}