Referrals

'use client'

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

export function ReferralSection() {
  const { referralCode, referralUrl, copyUrl, copied } = useReferral()

  return (
    <div>
      <h3>Invite Friends</h3>
      <p>Share your referral link and earn rewards!</p>

      <div className="flex gap-2 mt-4">
        <input readOnly value={referralUrl} className="flex-1 border rounded px-3 py-2" />
        <button onClick={copyUrl}>{copied ? 'Copied!' : 'Copy'}</button>
      </div>

      <p className="text-sm text-muted-foreground mt-2">
        Your code: <code>{referralCode}</code>
      </p>
    </div>
  )
}

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

// Get or create referral code for user
const { code, url } = await platform.referrals.getCode(userId)

// Custom referral URL
const customUrl = `https://myapp.com/signup?ref=${code}`

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

// After creating the new user account
const referralCode = searchParams.get('ref')

if (referralCode) {
  try {
    const result = await platform.referrals.redeem({
      code: referralCode,
      newUserId: newUser.id,
    })

    console.log('Referral redeemed:', result)
    // result.referrerId - Who referred them
    // result.reward - Reward details
  } catch (error) {
    // Invalid or expired code - still allow signup
    console.log('Invalid referral code:', referralCode)
  }
}

// App Settings → Growth → Referrals

{
  "enabled": true,
  "rewards": {
    "referrer": {
      "type": "credit",
      "amount": 10,         // $10 credit
      "triggerOn": "signup" // or "purchase", "subscription"
    },
    "referee": {
      "type": "discount",
      "amount": 20,         // 20% discount
      "maxUses": 1
    }
  },
  "limits": {
    "maxReferrals": 50,     // Per user
    "expirationDays": 30    // Code expiration
  }
}

'use client'

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

export function ReferralStats() {
  const { stats } = useReferral()

  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="border rounded p-4 text-center">
        <div className="text-2xl font-bold">{stats?.clicks}</div>
        <div className="text-muted-foreground">Link Clicks</div>
      </div>
      <div className="border rounded p-4 text-center">
        <div className="text-2xl font-bold">{stats?.signups}</div>
        <div className="text-muted-foreground">Sign Ups</div>
      </div>
      <div className="border rounded p-4 text-center">
        <div className="text-2xl font-bold">${stats?.earned}</div>
        <div className="text-muted-foreground">Earned</div>
      </div>
    </div>
  )
}

const stats = await platform.referrals.getStats(userId)

// {
//   code: 'ABC123',
//   clicks: 45,
//   signups: 12,
//   conversions: 8,
//   earned: 80.00,
//   referrals: [
//     { userId: 'user_123', signedUpAt: '2024-01-15', status: 'converted' },
//     { userId: 'user_456', signedUpAt: '2024-01-16', status: 'pending' },
//   ]
// }

const leaderboard = await platform.referrals.getLeaderboard({
  period: 'month', // 'week', 'month', 'all-time'
  limit: 10,
})

// [
//   { userId: 'user_1', name: 'Alice', referrals: 25, earned: 250 },
//   { userId: 'user_2', name: 'Bob', referrals: 18, earned: 180 },
//   // ...
// ]

// Request custom code (subject to availability)
await platform.referrals.setCustomCode({
  userId: user.id,
  code: 'ALICE20', // Must be unique
})

// Validate custom code
const available = await platform.referrals.checkCodeAvailability('ALICE20')