Subscriptions

import { useSubscription } from '@nestled-template/web'

function MyComponent() {
  const {
    subscription,
    plan,
    hasActiveSubscription,
    isTrialing,
    isCanceled,
    isPastDue,
    trialEndsAt,
    periodEndsAt,
  } = useSubscription()

  if (!hasActiveSubscription) {
    return <div>Please subscribe to access this feature</div>
  }

  return <div>Welcome, {plan?.name} subscriber!</div>
}

import { useHasFeature } from '@nestled-template/web'

function AdvancedReportsPage() {
  const hasAdvancedReports = useHasFeature('advanced_reports')

  if (!hasAdvancedReports) {
    return <UpgradePrompt feature="Advanced Reports" />
  }

  return <AdvancedReportsContent />
}

import { useLimit } from '@nestled-template/web'

function CreateProjectButton() {
  const { isWithin, limit, remaining } = useLimit(
    'max_projects',
    currentProjectCount,
  )

  if (!isWithin) {
    return <button disabled>Project limit reached ({limit})</button>
  }

  return (
    <button onClick={createProject}>
      Create Project ({remaining} remaining)
    </button>
  )
}

import { RequireSubscription } from '@nestled-template/web'

<RequireSubscription>
  <PremiumFeature />
</RequireSubscription>

// Allow trial users
<RequireSubscription allowTrial={true}>
  <TrialOrPaidFeature />
</RequireSubscription>

// Custom fallback
<RequireSubscription fallback={<CustomUpgradePrompt />}>
  <PremiumFeature />
</RequireSubscription>

// Inline variant (renders nothing if no subscription)
<RequireSubscriptionInline>
  <PremiumButton />
</RequireSubscriptionInline>

import { RequirePlan } from '@nestled-template/web'

// Single feature
<RequirePlan feature="advanced_reports">
  <AdvancedReportsPage />
</RequirePlan>

// Multiple features (all required)
<RequirePlan features={['api_access', 'webhooks']} requireAll={true}>
  <APISettings />
</RequirePlan>

// Multiple features (any one required)
<RequirePlan features={['feature_a', 'feature_b']} requireAll={false}>
  <ConditionalFeature />
</RequirePlan>

// Inline variant
<RequirePlanInline feature="export_data">
  <ExportButton />
</RequirePlanInline>

import { RequireLimit } from '@nestled-template/web'

<RequireLimit limitKey="max_team_members" currentValue={teamSize}>
  <InviteMemberButton />
</RequireLimit>

// Inline variant
<RequireLimitInline limitKey="max_api_calls" currentValue={apiCallCount}>
  <MakeAPICallButton />
</RequireLimitInline>

import { UsageLimitWarning, MultiUsageLimitWarning, UsageBadge } from '@nestled-template/web'

// Single limit warning
<UsageLimitWarning
  limitKey="max_projects"
  currentValue={projectCount}
  warningThreshold={80}
  label="Projects"
  showBar={true}
/>

// Multiple limits
<MultiUsageLimitWarning
  limits={{
    max_projects: projectCount,
    max_team_members: teamSize,
    max_storage_gb: storageUsedGB,
  }}
  warningThreshold={80}
/>

// Compact badge
<UsageBadge limitKey="max_api_calls" currentValue={apiCallCount} />

import { UpgradeModal } from '@nestled-template/web'
import { useState } from 'react'

function MyComponent() {
  const [showUpgrade, setShowUpgrade] = useState(false)

  return (
    <>
      <button onClick={() => setShowUpgrade(true)}>Upgrade Plan</button>

      <UpgradeModal
        isOpen={showUpgrade}
        onClose={() => setShowUpgrade(false)}
        feature="Advanced Analytics"
        reason="Get deeper insights with advanced analytics"
      />
    </>
  )
}

const {
  subscription, // Current subscription object
  plan, // Current plan object
  isLoading, // Loading state
  error, // Error state
  hasActiveSubscription, // true if ACTIVE or TRIALING
  isTrialing, // true if in trial period
  isCanceled, // true if canceled or cancel pending
  isPastDue, // true if payment failed
  trialEndsAt, // Date trial ends (null if not trialing)
  periodEndsAt, // Date current period ends
  requireActiveSubscription, // Throws if no active subscription
} = useSubscription()

const hasAPI = useHasFeature('api_access')

const hasAllFeatures = useHasFeatures(['api_access', 'webhooks', 'export_data'])

const hasAnyPremium = useHasAnyFeature([
  'advanced_reports',
  'api_access',
  'white_label',
])

const {
  plan, // Current plan object
  isLoading, // Loading state
  checkLimit, // (key) => { limit, hasLimit }
  isWithinLimit, // (key, value) => boolean
  hasFeature, // (feature) => boolean
  isPlan, // (name) => boolean
  isPlanOneOf, // (names) => boolean
  requireWithinLimit, // Throws if limit exceeded
} = usePlan()

const {
  limit, // The limit value (number)
  hasLimit, // true if limit exists
  isWithin, // true if within limit
  isAtLimit, // true if at or over limit
  remaining, // Number remaining (Infinity if no limit)
  percentUsed, // Percentage used (0-100)
} = useLimit('max_projects', currentProjectCount)

const limits = useLimits({
  max_projects: projectCount,
  max_team_members: teamSize,
  max_storage_gb: storageGB,
})

// limits.max_projects.isWithin
// limits.max_projects.remaining
// limits.max_team_members.percentUsed

["api_access", "webhooks", "advanced_reports", "white_label"]

{
  "api_access": true,
  "webhooks": true,
  "advanced_reports": true,
  "white_label": false
}

{
  "max_projects": 10,
  "max_team_members": 5,
  "max_storage_gb": 100,
  "max_api_calls_per_month": 10000
}

function Dashboard() {
  const { isPlan } = usePlan()

  return (
    <div>
      {isPlan('Enterprise') && <AdminPanel />}
      {isPlan('Pro') && <AdvancedFeatures />}
      <BasicFeatures />
    </div>
  )
}

function ProjectsList() {
  const { isWithin, limit, remaining } = useLimit(
    'max_projects',
    projects.length,
  )

  return (
    <div>
      <h2>
        Projects ({projects.length}/{limit})
      </h2>

      {!isWithin && (
        <Alert type="warning">
          You have reached your project limit. Upgrade to create more.
        </Alert>
      )}

      {isWithin && remaining <= 2 && (
        <Alert type="info">You have {remaining} project slots remaining.</Alert>
      )}

      <RequireLimitInline
        limitKey="max_projects"
        currentValue={projects.length}
      >
        <CreateProjectButton />
      </RequireLimitInline>
    </div>
  )
}

function TrialBanner() {
  const { isTrialing, trialEndsAt, hasActiveSubscription } = useSubscription()

  if (!hasActiveSubscription || !isTrialing || !trialEndsAt) return null

  const daysLeft = Math.ceil(
    (trialEndsAt.getTime() - Date.now()) / (1000 * 60 * 60 * 24),
  )

  return (
    <Banner type="info">
      Your trial ends in {daysLeft} days. Upgrade now to continue using premium
      features.
      <UpgradeButton />
    </Banner>
  )
}