Fanbasis Integration

{
  "action": "test_connection"
}

{
  "ok": true
}

{
  "ok": false,
  "error": "Fanbasis API returned HTTP 401: Invalid API key"
}

{
  "action": "sync_products"
}

{
  "ok": true,
  "synced": 3
}

{
  "action": "toggle_offer",
  "serviceId": "999999",
  "enabled": true
}

{
  "ok": true
}

{
  "action": "register_webhook"
}

{
  "ok": true,
  "webhookUrl": "https://your-domain.vercel.app/api/fanbasis/webhook",
  "hasSecret": true,
  "eventTypes": [
    "payment.succeeded",
    "payment.failed",
    "payment.expired",
    "payment.canceled",
    "product.purchased",
    "subscription.created",
    "subscription.renewed",
    "subscription.completed",
    "subscription.canceled",
    "payment.refunded",
    "payment.dispute.opened"
  ]
}

{
  "action": "send_test_webhook",
  "eventType": "payment.succeeded"
}

{
  "ok": true,
  "subscriptionId": "12345",
  "eventType": "payment.succeeded",
  "fanbasisResponse": { "..." }
}

{
  "action": "send_direct_test",
  "eventType": "payment.succeeded",
  "email": "[email protected]"
}

{
  "ok": true,
  "webhookUrl": "https://your-domain.vercel.app/api/fanbasis/webhook",
  "eventType": "payment.succeeded",
  "email": "[email protected]",
  "webhookResponse": { "ok": true, "result": "user_created" }
}

{
  "action": "manual_provision",
  "email": "[email protected]",
  "serviceId": "999999"
}

{
  "ok": true,
  "result": "user_created",
  "email": "[email protected]",
  "magicLinkSent": true
}

// Extract all candidate IDs from payload
const candidateIds = [
  service.service_id,
  service.id,
  service.product_id,
  payload.checkout_session_id,
  extractIdFromPaymentLink(service.payment_link),
  // ... more variations
]

// Check if any ID matches enabled offer
const enabledOffers = await client
  .from('fanbasis_enabled_offers')
  .select('service_id, checkout_session_id')
  .eq('enabled', true)

const offerEnabled = candidateIds.some(id => 
  enabledOffers.some(offer => 
    offer.service_id === id || offer.checkout_session_id === id
  )
)

// Fallback: allow if title contains "adrecon"
if (!offerEnabled && hasAdReconTitle(payload)) {
  offerEnabled = true
}

CREATE TABLE fanbasis_enabled_offers (
  service_id TEXT PRIMARY KEY,
  title TEXT,
  price NUMERIC,
  enabled BOOLEAN DEFAULT false,
  checkout_session_id TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE fanbasis_webhook_log (
  id BIGSERIAL PRIMARY KEY,
  event_type TEXT,
  service_id TEXT,
  fan_email TEXT,
  payload JSONB,
  result TEXT,
  error_message TEXT,
  created_at TIMESTAMPTZ DEFAULT now()
);

CREATE TABLE integration_secrets (
  key TEXT PRIMARY KEY,
  value TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT now(),
  updated_at TIMESTAMPTZ DEFAULT now()
);

import { useState, useEffect } from 'react'
import { useSupabaseClient } from '@/hooks/useSupabase'

export function FanbasisAdmin() {
  const [status, setStatus] = useState(null)
  const [offers, setOffers] = useState([])
  const [webhookLog, setWebhookLog] = useState([])
  const supabase = useSupabaseClient()
  
  const getToken = async () => {
    const { data: { session } } = await supabase.auth.getSession()
    return session.access_token
  }
  
  const fetchStatus = async () => {
    const token = await getToken()
    const response = await fetch('/api/admin/fanbasis?action=status', {
      headers: { 'Authorization': `Bearer ${token}` }
    })
    setStatus(await response.json())
  }
  
  const fetchOffers = async () => {
    const token = await getToken()
    const response = await fetch('/api/admin/fanbasis?action=offers', {
      headers: { 'Authorization': `Bearer ${token}` }
    })
    const { offers } = await response.json()
    setOffers(offers)
  }
  
  const syncProducts = async () => {
    const token = await getToken()
    const response = await fetch('/api/admin/fanbasis', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ action: 'sync_products' })
    })
    const { synced } = await response.json()
    alert(`Synced ${synced} products`)
    await fetchOffers()
  }
  
  const toggleOffer = async (serviceId, enabled) => {
    const token = await getToken()
    await fetch('/api/admin/fanbasis', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'toggle_offer',
        serviceId,
        enabled
      })
    })
    await fetchOffers()
  }
  
  const registerWebhook = async () => {
    const token = await getToken()
    const response = await fetch('/api/admin/fanbasis', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ action: 'register_webhook' })
    })
    const result = await response.json()
    alert(`Webhook registered: ${result.webhookUrl}`)
    await fetchStatus()
  }
  
  const sendTestWebhook = async () => {
    const token = await getToken()
    const response = await fetch('/api/admin/fanbasis', {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        action: 'send_test_webhook',
        eventType: 'payment.succeeded'
      })
    })
    const result = await response.json()
    alert('Test webhook sent')
  }
  
  useEffect(() => {
    fetchStatus()
    fetchOffers()
  }, [])
  
  return (
    <div>
      <h1>Fanbasis Integration</h1>
      
      {status && (
        <div className="status">
          <p>API Key: {status.apiKeySet ? '✓ Configured' : '✗ Missing'}</p>
          <p>Webhook Secret: {status.webhookSecretSet ? '✓ Configured' : '✗ Missing'}</p>
        </div>
      )}
      
      <div className="actions">
        <button onClick={syncProducts}>Sync Products</button>
        <button onClick={registerWebhook}>Register Webhook</button>
        <button onClick={sendTestWebhook}>Send Test Event</button>
      </div>
      
      <h2>Offers</h2>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Price</th>
            <th>Service ID</th>
            <th>Enabled</th>
          </tr>
        </thead>
        <tbody>
          {offers.map(offer => (
            <tr key={offer.service_id}>
              <td>{offer.title}</td>
              <td>${offer.price}</td>
              <td>{offer.service_id}</td>
              <td>
                <input
                  type="checkbox"
                  checked={offer.enabled}
                  onChange={(e) => toggleOffer(offer.service_id, e.target.checked)}
                />
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}