Get Started- Complete documentation overview

Display user subscription status and provide upgrade call-to-action.

Overview

The SubscriptionStatus component shows:

  • Active subscription status
  • "Unlimited AI Access" badge for subscribers
  • Upgrade CTA for non-subscribers
  • Real-time subscription updates

Basic Usage

import SubscriptionStatus from "@/components/ai/SubscriptionStatus";

export default function Dashboard() {
  return (
    <div>
      <SubscriptionStatus />
    </div>
  );
}

Component Features

  • Real-time updates - Automatically syncs with Firestore subscription changes
  • Subscription status - Shows active/inactive subscription state
  • Upgrade CTA - Direct link to pricing page for non-subscribers
  • Manage link - Link to billing portal for active subscribers

Display States

Active Subscription

When a user has an active subscription, the component displays:

  • ✅ "Unlimited AI Access" badge
  • Current plan name (if available)
  • Renewal/cancellation date
  • "Manage Subscription" button linking to /dashboard/billing

No Subscription

When a user doesn't have an active subscription, the component displays:

  • ⚠️ "Free Tier" badge
  • "Upgrade to unlock unlimited AI conversations" message
  • "Upgrade Now" button linking to /pricing

Integration Examples

In Dashboard Sidebar

import SubscriptionStatus from "@/components/ai/SubscriptionStatus";

export function ChatSidebar() {
  return (
    <div className="sidebar">
      {/* Conversation list */}
      <div className="sidebar-footer">
        <SubscriptionStatus />
      </div>
    </div>
  );
}

In Dashboard Header

import SubscriptionStatus from "@/components/ai/SubscriptionStatus";

export function DashboardHeader() {
  return (
    <header className="navbar">
      <div className="flex-1">
        <Logo />
      </div>
      <div className="flex-none">
        <SubscriptionStatus />
      </div>
    </header>
  );
}

In Chat Interface

import SubscriptionStatus from "@/components/ai/SubscriptionStatus";
import ChatInterface from "@/components/ai/ChatInterface";

export function ChatPage() {
  return (
    <div>
      <div className="mb-4">
        <SubscriptionStatus />
      </div>
      <ChatInterface />
    </div>
  );
}

How It Works

The component:

  1. Listens to auth state - Uses Firebase Auth to detect current user
  2. Subscribes to user document - Real-time Firestore listener on users/{userId}
  3. Reads subscription data - Extracts subscription status from user document
  4. Updates UI - Reactively updates when subscription changes

Subscription Status Values

The component checks for these subscription statuses:

  • "active" - Active subscription
  • "trialing" - Trial period active
  • "inactive" - No subscription or subscription canceled

Error Handling

The component handles:

  • Loading states (shows spinner while checking subscription)
  • Missing user data (shows free tier state)
  • Network errors (gracefully degrades to free tier state)

Customization

The component uses DaisyUI classes and can be styled with Tailwind:

// The component uses these classes:
// - badge-success for active subscription
// - badge-warning for free tier
// - btn-primary for upgrade CTA
// - btn-outline for manage subscription

Best Practices

  1. Show prominently - Make subscription status visible
  2. Update in real-time - Component automatically refreshes
  3. Handle gracefully - Shows appropriate state for all scenarios
  4. Mobile friendly - Responsive design works on all screens
  5. Accessible - Screen reader friendly

Next Steps