Launch a SaaS with Billing, Feature Flags, and Customer Support

// lib/paddle.ts — Paddle billing integration
import { Paddle } from '@paddle/paddle-node-sdk'

const paddle = new Paddle(process.env.PADDLE_API_KEY!)

// Price IDs configured in Paddle dashboard
const PLANS = {
  starter: { priceId: 'pri_starter_monthly', seats: 5, price: 19 },
  pro: { priceId: 'pri_pro_monthly', seats: 20, price: 49 },
  business: { priceId: 'pri_business_monthly', seats: 100, price: 149 },
} as const

// components/PricingCard.tsx — Paddle checkout trigger
'use client'

export function PricingCard({ plan, user }) {
  const handleSubscribe = () => {
    window.Paddle.Checkout.open({
      items: [{ priceId: plan.priceId, quantity: 1 }],
      customer: { email: user.email },
      customData: { userId: user.id, plan: plan.name },
      settings: {
        successUrl: '/dashboard?subscribed=true',
        theme: 'light',
      },
    })
  }

  return (
    <div className="border rounded-xl p-6">
      <h3 className="text-xl font-bold">{plan.name}</h3>
      <p className="text-3xl font-bold mt-2">${plan.price}<span className="text-sm text-gray-500">/mo</span></p>
      <p className="text-gray-600 mt-1">Up to {plan.seats} team members</p>
      <button onClick={handleSubscribe} className="mt-4 w-full bg-blue-600 text-white py-2 rounded-lg">
        Start Free Trial
      </button>
    </div>
  )
}

// app/api/paddle/webhook/route.ts — Handle Paddle events
import { Paddle } from '@paddle/paddle-node-sdk'

const paddle = new Paddle(process.env.PADDLE_API_KEY!)

export async function POST(req: Request) {
  const body = await req.text()
  const signature = req.headers.get('paddle-signature')!
  const event = paddle.webhooks.unmarshal(body, process.env.PADDLE_WEBHOOK_SECRET!, signature)

  switch (event.eventType) {
    case 'subscription.activated': {
      const { customerId, customData } = event.data
      await db.user.update({
        where: { id: customData.userId },
        data: {
          plan: customData.plan,
          paddleCustomerId: customerId,
          subscriptionId: event.data.id,
          trialEndsAt: null,
        },
      })
      // Trigger welcome email via Loops
      await trackLoopsEvent(customData.userId, 'subscription_activated', { plan: customData.plan })
      break
    }

    case 'subscription.canceled': {
      await db.user.update({
        where: { subscriptionId: event.data.id },
        data: { canceledAt: new Date(), cancelReason: event.data.cancelationReason },
      })
      await trackLoopsEvent(event.data.customData.userId, 'subscription_canceled')
      break
    }

    case 'subscription.past_due': {
      // Payment failed — send dunning email, restrict features
      await db.user.update({
        where: { subscriptionId: event.data.id },
        data: { paymentStatus: 'past_due' },
      })
      break
    }
  }

  return new Response('OK')
}

// lib/flags.ts — Feature flag helper
import * as LaunchDarkly from '@launchdarkly/node-server-sdk'

const ldClient = LaunchDarkly.init(process.env.LAUNCHDARKLY_SDK_KEY!)
await ldClient.waitForInitialization()

export async function checkFeature(flagKey: string, user: { id: string; plan: string; email: string }) {
  const context = {
    kind: 'user',
    key: user.id,
    email: user.email,
    custom: { plan: user.plan },
  }
  return ldClient.variation(flagKey, context, false)
}

// middleware/features.ts — Gate features by plan and flag
export async function canAccessFeature(userId: string, feature: string) {
  const user = await db.user.findUnique({ where: { id: userId } })

  // Plan-based gating
  const planFeatures = {
    starter: ['projects', 'tasks', 'basic-reports'],
    pro: ['projects', 'tasks', 'basic-reports', 'gantt', 'time-tracking', 'integrations'],
    business: ['projects', 'tasks', 'basic-reports', 'gantt', 'time-tracking', 'integrations', 'custom-fields', 'audit-log', 'sso'],
  }

  if (!planFeatures[user.plan]?.includes(feature)) return false

  // Feature flag check (for gradual rollouts)
  const flagEnabled = await checkFeature(`feature-${feature}`, user)
  return flagEnabled
}

// components/Support.tsx — Crisp chat with user context
'use client'
import { useEffect } from 'react'
import { useUser } from '@/hooks/useUser'

export function SupportChat() {
  const { user } = useUser()

  useEffect(() => {
    window.$crisp = []
    window.CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_ID!

    const s = document.createElement('script')
    s.src = 'https://client.crisp.chat/l.js'
    s.async = true
    document.head.appendChild(s)

    // Pass user context to support agents
    if (user) {
      window.$crisp.push(['set', 'user:email', [user.email]])
      window.$crisp.push(['set', 'user:nickname', [user.name]])
      window.$crisp.push(['set', 'session:data', [
        ['plan', user.plan],
        ['mrr', String(user.mrr)],
        ['signup_date', user.createdAt],
        ['projects_count', String(user.projectsCount)],
      ]])
    }
  }, [user])

  return null
}

// lib/loops.ts — Email events and transactional sends
const LOOPS_KEY = process.env.LOOPS_API_KEY!

export async function trackLoopsEvent(userId: string, event: string, data?: Record<string, any>) {
  const user = await db.user.findUnique({ where: { id: userId } })
  await fetch('https://app.loops.so/api/v1/events/send', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${LOOPS_KEY}` },
    body: JSON.stringify({
      email: user.email,
      eventName: event,
      eventProperties: data,
    }),
  })
}

// Automation triggers configured in Loops dashboard:
// 1. "user_signed_up" → Welcome email → Wait 1 day → Onboarding tips → Wait 3 days → "How's it going?"
// 2. "trial_ending_soon" → Upgrade reminder with pricing
// 3. "subscription_canceled" → Win-back sequence (discount offer after 7 days)

// components/FeedbackWidget.tsx — Canny feedback integration
export function FeedbackButton() {
  useEffect(() => {
    if (window.Canny) {
      window.Canny('identify', {
        appID: process.env.NEXT_PUBLIC_CANNY_APP_ID,
        user: {
          id: currentUser.id,
          email: currentUser.email,
          name: currentUser.name,
          customFields: { plan: currentUser.plan, mrr: currentUser.mrr },
        },
      })
    }
  }, [])

  return (
    <button data-canny-link data-board-token="your-board-token"
      className="flex items-center gap-2 text-gray-600 hover:text-gray-900">
      💡 Request Feature
    </button>
  )
}