251 lines
11 KiB
TypeScript
251 lines
11 KiB
TypeScript
import { useState } from 'react'
|
|
import { useStore } from '@nanostores/react'
|
|
import { PageHeader, BillingPageSkeleton } from '../components/shared'
|
|
import { Icons } from '../components/shared/Icons'
|
|
import { Button } from '../components/ui'
|
|
import { $billing } from '../stores/billing'
|
|
import type { Tier, TierConfig } from '../types'
|
|
|
|
type BillingCycle = 'monthly' | 'annual'
|
|
|
|
function formatPrice(cents: number): string {
|
|
return `$${(cents / 100).toFixed(0)}`
|
|
}
|
|
|
|
function getFeatureList(config: TierConfig, tier: Tier): { name: string; included: boolean }[] {
|
|
if (tier === 'free') {
|
|
return [
|
|
{ name: 'Unlimited posts', included: true },
|
|
{ name: 'Comments & reactions', included: true },
|
|
{ name: 'writekit.dev subdomain', included: true },
|
|
{ name: `${config.analytics_retention}-day analytics`, included: true },
|
|
{ name: `API access (${config.api_rate_limit} req/hr)`, included: true },
|
|
{ name: `${config.max_webhooks} webhooks`, included: true },
|
|
{ name: `${config.max_plugins} plugins`, included: true },
|
|
{ name: 'Custom domain', included: false },
|
|
{ name: 'Remove "Powered by" badge', included: false },
|
|
]
|
|
}
|
|
return [
|
|
{ name: 'Unlimited posts', included: true },
|
|
{ name: 'Comments & reactions', included: true },
|
|
{ name: 'writekit.dev subdomain', included: true },
|
|
{ name: 'Custom domain', included: true },
|
|
{ name: 'No "Powered by" badge', included: true },
|
|
{ name: `${config.analytics_retention}-day analytics`, included: true },
|
|
{ name: `API access (${config.api_rate_limit} req/hr)`, included: true },
|
|
{ name: `${config.max_webhooks} webhooks`, included: true },
|
|
{ name: `${config.max_plugins} plugins`, included: true },
|
|
{ name: 'Priority support', included: true },
|
|
]
|
|
}
|
|
|
|
export default function BillingPage() {
|
|
const { data: billing } = useStore($billing)
|
|
const [billingCycle, setBillingCycle] = useState<BillingCycle>('annual')
|
|
|
|
if (!billing) return <BillingPageSkeleton />
|
|
|
|
const currentTier = billing.current_tier
|
|
const currentConfig = billing.tiers[currentTier]
|
|
const proConfig = billing.tiers.pro
|
|
const proFeatures = getFeatureList(proConfig, 'pro')
|
|
|
|
const annualSavings = (proConfig.monthly_price * 12 - proConfig.annual_price) / 100
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader />
|
|
|
|
<div className="-mx-6 lg:-mx-10 mt-6">
|
|
{/* Current Plan */}
|
|
<div className="px-6 lg:px-10 py-5">
|
|
<div className="text-xs font-medium text-muted uppercase tracking-wide">Current Plan</div>
|
|
</div>
|
|
<div className="px-6 lg:px-10 pb-6">
|
|
<div className="p-4 border border-accent bg-accent/5">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-lg font-medium">{currentConfig.name}</span>
|
|
<span className="px-2 py-0.5 bg-accent/20 text-accent text-xs font-medium">Active</span>
|
|
</div>
|
|
<div className="text-sm text-muted mt-1">{currentConfig.description}</div>
|
|
</div>
|
|
{currentTier === 'free' && (
|
|
<Button variant="primary" href="#upgrade">Upgrade to Pro</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border" />
|
|
|
|
{/* Upgrade Section */}
|
|
{currentTier === 'free' && (
|
|
<>
|
|
<div id="upgrade" className="px-6 lg:px-10 py-5">
|
|
<div className="text-xs font-medium text-muted uppercase tracking-wide">Upgrade to Pro</div>
|
|
<div className="text-xs text-muted mt-0.5">Get custom domain, extended analytics, and more</div>
|
|
</div>
|
|
|
|
<div className="px-6 lg:px-10 pb-6">
|
|
{/* Billing Toggle */}
|
|
<div className="flex items-center justify-center gap-3 mb-6">
|
|
<button
|
|
onClick={() => setBillingCycle('monthly')}
|
|
className={`px-3 py-1.5 text-sm font-medium transition-colors ${
|
|
billingCycle === 'monthly' ? 'text-text' : 'text-muted hover:text-text'
|
|
}`}
|
|
>
|
|
Monthly
|
|
</button>
|
|
<button
|
|
onClick={() => setBillingCycle('annual')}
|
|
className={`px-3 py-1.5 text-sm font-medium transition-colors flex items-center gap-2 ${
|
|
billingCycle === 'annual' ? 'text-text' : 'text-muted hover:text-text'
|
|
}`}
|
|
>
|
|
Annual
|
|
<span className="px-1.5 py-0.5 bg-success/20 text-success text-xs">
|
|
Save ${annualSavings}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Pro Plan Card */}
|
|
<div className="max-w-md mx-auto p-6 border border-border">
|
|
<div className="text-center mb-6">
|
|
<div className="text-sm font-medium text-muted mb-2">Pro</div>
|
|
<div className="text-4xl font-semibold tracking-tight">
|
|
{formatPrice(billingCycle === 'monthly' ? proConfig.monthly_price : proConfig.annual_price)}
|
|
<span className="text-base font-normal text-muted">
|
|
/{billingCycle === 'monthly' ? 'mo' : 'yr'}
|
|
</span>
|
|
</div>
|
|
{billingCycle === 'annual' && (
|
|
<div className="text-xs text-muted mt-1">
|
|
{formatPrice(Math.round(proConfig.annual_price / 12))}/mo billed annually
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<ul className="space-y-3 mb-6">
|
|
{proFeatures.map((feature) => (
|
|
<li key={feature.name} className="flex items-center gap-2 text-sm">
|
|
<Icons.Check className="text-success flex-shrink-0" />
|
|
<span>{feature.name}</span>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<Button variant="primary" className="w-full">
|
|
Upgrade to Pro
|
|
</Button>
|
|
|
|
<p className="text-xs text-muted text-center mt-3">
|
|
Secure payment via Lemon Squeezy. Cancel anytime.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border" />
|
|
</>
|
|
)}
|
|
|
|
{/* Feature Comparison */}
|
|
<div className="px-6 lg:px-10 py-5">
|
|
<div className="text-xs font-medium text-muted uppercase tracking-wide">Feature Comparison</div>
|
|
</div>
|
|
<div className="px-6 lg:px-10 pb-6">
|
|
<div className="border border-border overflow-hidden">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="border-b border-border bg-muted/5">
|
|
<th className="text-left px-4 py-3 font-medium">Feature</th>
|
|
<th className="text-center px-4 py-3 font-medium w-24">Free</th>
|
|
<th className="text-center px-4 py-3 font-medium w-24">Pro</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">Custom domain</td>
|
|
<td className="text-center px-4 py-3"><Icons.Close className="text-muted/50 inline" /></td>
|
|
<td className="text-center px-4 py-3"><Icons.Check className="text-success inline" /></td>
|
|
</tr>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">"Powered by WriteKit" badge</td>
|
|
<td className="text-center px-4 py-3 text-muted">Required</td>
|
|
<td className="text-center px-4 py-3 text-muted">Hidden</td>
|
|
</tr>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">Analytics retention</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.free.analytics_retention} days</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.pro.analytics_retention} days</td>
|
|
</tr>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">API rate limit</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.free.api_rate_limit}/hr</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.pro.api_rate_limit}/hr</td>
|
|
</tr>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">Webhooks</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.free.max_webhooks}</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.pro.max_webhooks}</td>
|
|
</tr>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">Plugins</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.free.max_plugins}</td>
|
|
<td className="text-center px-4 py-3 text-muted">{billing.tiers.pro.max_plugins}</td>
|
|
</tr>
|
|
<tr className="border-b border-border">
|
|
<td className="px-4 py-3">Posts</td>
|
|
<td className="text-center px-4 py-3 text-muted">Unlimited</td>
|
|
<td className="text-center px-4 py-3 text-muted">Unlimited</td>
|
|
</tr>
|
|
<tr>
|
|
<td className="px-4 py-3">Support</td>
|
|
<td className="text-center px-4 py-3 text-muted">Community</td>
|
|
<td className="text-center px-4 py-3 text-muted">Priority</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="border-t border-border" />
|
|
|
|
{/* FAQ */}
|
|
<div className="px-6 lg:px-10 py-5">
|
|
<div className="text-xs font-medium text-muted uppercase tracking-wide">Questions</div>
|
|
</div>
|
|
<div className="px-6 lg:px-10 pb-6 space-y-4">
|
|
<div>
|
|
<div className="text-sm font-medium mb-1">Can I cancel anytime?</div>
|
|
<div className="text-sm text-muted">
|
|
Yes. Cancel anytime and keep access until the end of your billing period.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium mb-1">Can I switch from monthly to annual?</div>
|
|
<div className="text-sm text-muted">
|
|
Yes. Switch anytime and we'll prorate your payment.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium mb-1">What happens to my content if I downgrade?</div>
|
|
<div className="text-sm text-muted">
|
|
Your content stays. Custom domain will stop working, badge will appear, and analytics older than 7 days won't be accessible.
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-sm font-medium mb-1">Can I export my data?</div>
|
|
<div className="text-sm text-muted">
|
|
Yes. Export all your posts, settings, and assets anytime from the Data page. Your data is always yours.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|