How to Integrate Lovable with Sendible

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 SENDIBLE_BASE = 'https://api.sendible.com/api/v2'
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('SENDIBLE_API_KEY')
20    if (!apiKey) throw new Error('Missing required secret: SENDIBLE_API_KEY')
21
22    if (action === 'get-services') {
23      const res = await fetch(`${SENDIBLE_BASE}/services.json?api_key=${apiKey}`)
24      if (!res.ok) {
25        const err = await res.json().catch(() => ({}))
26        throw new Error(`Sendible services error ${res.status}: ${JSON.stringify(err)}`)
27      }
28      const data = await res.json()
29      // Normalize to a clean array
30      const services = (data.services || data || []).map((s: Record<string, unknown>) => ({
31        id: s.id,
32        name: s.name,
33        type: s.profile_type || s.type,
34      }))
35      return new Response(
36        JSON.stringify({ success: true, services }),
37        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
38      )
39    }
40
41    if (action === 'schedule') {
42      const { message, serviceIds, scheduledAt = '' } = body
43      if (!message) throw new Error('message is required for schedule action')
44      if (!serviceIds || serviceIds.length === 0) throw new Error('serviceIds array is required and must not be empty')
45
46      const formData = new URLSearchParams()
47      formData.append('message', message)
48      formData.append('service_ids', Array.isArray(serviceIds) ? serviceIds.join(',') : serviceIds)
49      if (scheduledAt) formData.append('date_time', scheduledAt)
50
51      const res = await fetch(`${SENDIBLE_BASE}/messages.json?api_key=${apiKey}`, {
52        method: 'POST',
53        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
54        body: formData.toString(),
55      })
56
57      const data = await res.json().catch(() => ({}))
58      if (!res.ok) {
59        throw new Error(`Sendible schedule error ${res.status}: ${JSON.stringify(data)}`)
60      }
61
62      return new Response(
63        JSON.stringify({ success: true, message: 'Post scheduled successfully', data }),
64        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
65      )
66    }
67
68    throw new Error(`Unknown action: ${action}. Use 'schedule' or 'get-services'.`)
69  } catch (error) {
70    return new Response(
71      JSON.stringify({ error: error.message }),
72      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
73    )
74  }
75})

1import { useState, useEffect } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Textarea } from '@/components/ui/textarea'
5import { Checkbox } from '@/components/ui/checkbox'
6import { Label } from '@/components/ui/label'
7import { Input } from '@/components/ui/input'
8import { toast } from '@/components/ui/use-toast'
9
10interface Service { id: string; name: string; type: string }
11
12export const SocialScheduler = () => {
13  const [message, setMessage] = useState('')
14  const [services, setServices] = useState<Service[]>([])
15  const [selectedIds, setSelectedIds] = useState<string[]>([])
16  const [scheduledAt, setScheduledAt] = useState('')
17  const [loading, setLoading] = useState(false)
18
19  useEffect(() => {
20    supabase.functions.invoke('sendible-social', { body: { action: 'get-services' } })
21      .then(({ data }) => setServices(data?.services || []))
22      .catch(() => toast({ title: 'Could not load social accounts', variant: 'destructive' }))
23  }, [])
24
25  const toggleService = (id: string) =>
26    setSelectedIds((prev) => prev.includes(id) ? prev.filter((s) => s !== id) : [...prev, id])
27
28  const handleSubmit = async (e: React.FormEvent) => {
29    e.preventDefault()
30    if (selectedIds.length === 0) {
31      toast({ title: 'Select at least one social account', variant: 'destructive' })
32      return
33    }
34    setLoading(true)
35    try {
36      const { error } = await supabase.functions.invoke('sendible-social', {
37        body: { action: 'schedule', message, serviceIds: selectedIds, scheduledAt },
38      })
39      if (error) throw error
40      toast({ title: scheduledAt ? 'Post scheduled!' : 'Post published!' })
41      setMessage('')
42      setSelectedIds([])
43      setScheduledAt('')
44    } catch (err) {
45      toast({ title: 'Scheduling failed', description: 'Please try again.', variant: 'destructive' })
46    } finally {
47      setLoading(false)
48    }
49  }
50
51  return (
52    <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
53      <div>
54        <Label>Message ({message.length}/280)</Label>
55        <Textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="What would you like to share?" rows={4} required />
56      </div>
57      <div>
58        <Label>Social Accounts</Label>
59        <div className="space-y-2 mt-1">
60          {services.map((s) => (
61            <div key={s.id} className="flex items-center gap-2">
62              <Checkbox checked={selectedIds.includes(s.id)} onCheckedChange={() => toggleService(s.id)} />
63              <span className="text-sm">{s.name} ({s.type})</span>
64            </div>
65          ))}
66        </div>
67      </div>
68      <div>
69        <Label>Schedule Time (optional — leave blank to post now)</Label>
70        <Input type="datetime-local" value={scheduledAt} onChange={(e) => setScheduledAt(e.target.value)} />
71      </div>
72      <Button type="submit" disabled={loading}>{loading ? 'Scheduling...' : 'Schedule Post'}</Button>
73    </form>
74  )
75}