How to Integrate Lovable with SocialBee

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://app.socialbee.com/api/v1'
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('SOCIALBEE_API_KEY')
20    const workspaceId = Deno.env.get('SOCIALBEE_WORKSPACE_ID')
21
22    if (!apiKey || !workspaceId) {
23      throw new Error('Missing required secrets: SOCIALBEE_API_KEY and SOCIALBEE_WORKSPACE_ID')
24    }
25
26    const headers = {
27      Authorization: `Bearer ${apiKey}`,
28      'Content-Type': 'application/json',
29    }
30
31    if (action === 'get-categories') {
32      const res = await fetch(`${BASE}/categories?workspace_id=${workspaceId}`, { headers })
33      if (!res.ok) {
34        const err = await res.json().catch(() => ({}))
35        throw new Error(`SocialBee categories error ${res.status}: ${JSON.stringify(err)}`)
36      }
37      const data = await res.json()
38      const categories = (data.data || data || []).map((c: Record<string, unknown>) => ({
39        id: c.id,
40        name: c.name,
41        recyclable: c.recycle || false,
42      }))
43      return new Response(
44        JSON.stringify({ success: true, categories }),
45        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
46      )
47    }
48
49    if (action === 'add-post') {
50      const { message, categoryId, imageUrl = '', link = '' } = body
51      if (!message) throw new Error('message is required')
52      if (!categoryId) throw new Error('categoryId is required')
53
54      const postPayload: Record<string, unknown> = {
55        workspace_id: workspaceId,
56        category_id: categoryId,
57        content: [
58          {
59            text: message,
60            ...(imageUrl ? { media_urls: [imageUrl] } : {}),
61            ...(link ? { link } : {}),
62          },
63        ],
64      }
65
66      const res = await fetch(`${BASE}/posts`, {
67        method: 'POST',
68        headers,
69        body: JSON.stringify(postPayload),
70      })
71
72      const data = await res.json().catch(() => ({}))
73      if (!res.ok) {
74        throw new Error(`SocialBee add-post error ${res.status}: ${JSON.stringify(data)}`)
75      }
76
77      return new Response(
78        JSON.stringify({ success: true, postId: data.data?.id || data.id || null, message: 'Post added to category queue' }),
79        { headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
80      )
81    }
82
83    throw new Error(`Unknown action: ${action}. Use 'add-post' or 'get-categories'.`)
84  } catch (error) {
85    return new Response(
86      JSON.stringify({ error: error.message }),
87      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
88    )
89  }
90})

1import { useState, useEffect } from 'react'
2import { supabase } from '@/lib/supabase'
3import { Button } from '@/components/ui/button'
4import { Textarea } from '@/components/ui/textarea'
5import { Input } from '@/components/ui/input'
6import { Label } from '@/components/ui/label'
7import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@/components/ui/select'
8import { toast } from '@/components/ui/use-toast'
9
10interface Category { id: string; name: string; recyclable: boolean }
11
12export const SocialBeeSubmit = () => {
13  const [message, setMessage] = useState('')
14  const [imageUrl, setImageUrl] = useState('')
15  const [categories, setCategories] = useState<Category[]>([])
16  const [categoryId, setCategoryId] = useState('')
17  const [loading, setLoading] = useState(false)
18
19  useEffect(() => {
20    supabase.functions.invoke('socialbee-content', { body: { action: 'get-categories' } })
21      .then(({ data }) => {
22        setCategories(data?.categories || [])
23        if (data?.categories?.length > 0) setCategoryId(data.categories[0].id)
24      })
25      .catch(() => toast({ title: 'Could not load categories', variant: 'destructive' }))
26  }, [])
27
28  const selectedCategory = categories.find((c) => c.id === categoryId)
29
30  const handleSubmit = async (e: React.FormEvent) => {
31    e.preventDefault()
32    setLoading(true)
33    try {
34      const { error } = await supabase.functions.invoke('socialbee-content', {
35        body: { action: 'add-post', message, categoryId, imageUrl },
36      })
37      if (error) throw error
38      toast({ title: `Added to ${selectedCategory?.name || 'category'} queue!` })
39      setMessage('')
40      setImageUrl('')
41    } catch (err) {
42      toast({ title: 'Could not add post', variant: 'destructive' })
43    } finally {
44      setLoading(false)
45    }
46  }
47
48  return (
49    <form onSubmit={handleSubmit} className="space-y-4 max-w-lg">
50      <div>
51        <Label>Content Category</Label>
52        <Select value={categoryId} onValueChange={setCategoryId}>
53          <SelectTrigger><SelectValue placeholder="Select a category" /></SelectTrigger>
54          <SelectContent>
55            {categories.map((c) => (
56              <SelectItem key={c.id} value={c.id}>
57                {c.recyclable ? '♻ ' : ''}{c.name}
58              </SelectItem>
59            ))}
60          </SelectContent>
61        </Select>
62      </div>
63      <div>
64        <Label>Post Message *</Label>
65        <Textarea value={message} onChange={(e) => setMessage(e.target.value)} placeholder="Write your social media post..." rows={4} required />
66      </div>
67      <div>
68        <Label>Image URL (optional)</Label>
69        <Input value={imageUrl} onChange={(e) => setImageUrl(e.target.value)} placeholder="https://..." />
70      </div>
71      <Button type="submit" disabled={loading || !categoryId}>
72        {loading ? 'Adding...' : 'Add to Queue'}
73      </Button>
74    </form>
75  )
76}