Consent Management

// App Settings → Privacy → Consent Types

[
  {
    "id": "necessary",
    "name": "Essential Cookies",
    "description": "Required for the website to function properly",
    "required": true,
    "default": true
  },
  {
    "id": "analytics",
    "name": "Analytics",
    "description": "Help us understand how you use our site",
    "required": false,
    "default": false
  },
  {
    "id": "marketing",
    "name": "Marketing",
    "description": "Personalized ads and recommendations",
    "required": false,
    "default": false
  }
]

'use client'

import { useConsent } from '@sylphx/platform-sdk/react'

export function ConsentBanner() {
  const { hasResponded, consentTypes, acceptAll, declineOptional, setConsents } = useConsent()

  // Don't show if user already responded
  if (hasResponded) return null

  return (
    <div className="fixed bottom-0 inset-x-0 bg-white shadow-lg border-t p-6">
      <div className="max-w-4xl mx-auto">
        <h3 className="text-lg font-bold">We value your privacy</h3>
        <p className="text-muted-foreground mt-2">
          We use cookies to enhance your experience. Choose which cookies you allow.
        </p>

        <div className="mt-4 space-y-2">
          {consentTypes.map((type) => (
            <label key={type.id} className="flex items-center gap-3">
              <input
                type="checkbox"
                checked={type.granted || type.required}
                disabled={type.required}
                onChange={(e) => setConsents({ [type.id]: e.target.checked })}
              />
              <div>
                <span className="font-medium">{type.name}</span>
                {type.required && <span className="text-muted-foreground text-sm ml-2">(Required)</span>}
                <p className="text-sm text-muted-foreground">{type.description}</p>
              </div>
            </label>
          ))}
        </div>

        <div className="mt-6 flex gap-3">
          <button onClick={acceptAll}>Accept All</button>
          <button onClick={declineOptional}>Essential Only</button>
        </div>
      </div>
    </div>
  )
}

'use client'

import { useConsent, useAnalytics } from '@sylphx/platform-sdk/react'

export function AnalyticsTracker() {
  const { hasConsent } = useConsent()
  const { track } = useAnalytics()

  const handleAction = () => {
    // Only track if user consented to analytics
    if (hasConsent('analytics')) {
      track('button_clicked', { ... })
    }
  }

  return <button onClick={handleAction}>Click me</button>
}

import { platform } from '@/lib/platform'

// Check user's consent before sending marketing email
const consents = await platform.privacy.getUserConsents(userId)

if (consents.email) {
  await sendMarketingEmail(userId)
}

// Or use the shorthand
const hasEmailConsent = await platform.privacy.hasConsent(userId, 'email')

'use client'

import { useConsent } from '@sylphx/platform-sdk/react'

export function PrivacySettings() {
  const { consentTypes, setConsents, isLoading } = useConsent()

  const handleChange = async (typeId: string, granted: boolean) => {
    await setConsents({ [typeId]: granted })
  }

  if (isLoading) return <div>Loading...</div>

  return (
    <div>
      <h2>Privacy Settings</h2>
      {consentTypes.map((type) => (
        <label key={type.id} className="block py-3 border-b">
          <div className="flex items-center justify-between">
            <div>
              <span className="font-medium">{type.name}</span>
              <p className="text-sm text-muted-foreground">{type.description}</p>
            </div>
            <input
              type="checkbox"
              checked={type.granted}
              disabled={type.required}
              onChange={(e) => handleChange(type.id, e.target.checked)}
            />
          </div>
        </label>
      ))}
    </div>
  )
}

const history = await platform.privacy.getConsentHistory(userId)

// [
//   { timestamp: '2024-01-15T10:00:00Z', action: 'grant', consentType: 'analytics', source: 'banner' },
//   { timestamp: '2024-01-20T15:30:00Z', action: 'revoke', consentType: 'marketing', source: 'settings' },
// ]

// User requests data deletion
await platform.privacy.requestDeletion({
  userId: user.id,
  reason: 'User requested account deletion',
})

// The platform will:
// 1. Queue all user data for deletion
// 2. Send confirmation email
// 3. Delete data within 30 days
// 4. Notify your webhook when complete

import { useConsent } from '@sylphx/platform-sdk/react'

function App() {
  const { gpcEnabled } = useConsent()

  // GPC signal is automatically detected
  // If enabled, optional consents default to false
  if (gpcEnabled) {
    console.log('GPC detected - respecting user preference')
  }
}