221 lines
8.6 KiB
TypeScript
221 lines
8.6 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { Button, toast, Spinner, Modal } from '@ciphera-net/ui'
|
|
import { CreditCard, ArrowSquareOut } from '@phosphor-icons/react'
|
|
import { useSubscription } from '@/lib/swr/dashboard'
|
|
import { updatePaymentMethod, cancelSubscription, resumeSubscription, getOrders, type Order } from '@/lib/api/billing'
|
|
import { formatDateLong, formatDate } from '@/lib/utils/formatDate'
|
|
import { getAuthErrorMessage } from '@ciphera-net/ui'
|
|
|
|
export default function WorkspaceBillingTab() {
|
|
const { data: subscription, isLoading, mutate } = useSubscription()
|
|
const [cancelling, setCancelling] = useState(false)
|
|
const [showCancelConfirm, setShowCancelConfirm] = useState(false)
|
|
const [orders, setOrders] = useState<Order[]>([])
|
|
|
|
useEffect(() => {
|
|
getOrders().then(setOrders).catch(() => {})
|
|
}, [])
|
|
|
|
const formatAmount = (amount: string, currency: string) => {
|
|
return new Intl.NumberFormat('en-GB', { style: 'currency', currency: currency || 'EUR' }).format(parseFloat(amount))
|
|
}
|
|
|
|
const handleManageBilling = async () => {
|
|
try {
|
|
const { url } = await updatePaymentMethod()
|
|
if (url) window.location.href = url
|
|
} catch (err) {
|
|
toast.error(getAuthErrorMessage(err as Error) || 'Failed to update payment method')
|
|
}
|
|
}
|
|
|
|
const handleCancel = async () => {
|
|
setCancelling(true)
|
|
try {
|
|
await cancelSubscription()
|
|
await mutate()
|
|
toast.success('Subscription cancelled')
|
|
} catch (err) {
|
|
toast.error(getAuthErrorMessage(err as Error) || 'Failed to cancel subscription')
|
|
} finally {
|
|
setCancelling(false)
|
|
setShowCancelConfirm(false)
|
|
}
|
|
}
|
|
|
|
const handleResume = async () => {
|
|
try {
|
|
await resumeSubscription()
|
|
await mutate()
|
|
toast.success('Subscription resumed')
|
|
} catch (err) {
|
|
toast.error(getAuthErrorMessage(err as Error) || 'Failed to resume subscription')
|
|
}
|
|
}
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="flex items-center justify-center py-12">
|
|
<Spinner className="w-6 h-6 text-neutral-500" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (!subscription) {
|
|
return (
|
|
<div className="text-center py-12">
|
|
<CreditCard className="w-10 h-10 text-neutral-500 mx-auto mb-3" />
|
|
<h3 className="text-base font-semibold text-white mb-1">No subscription</h3>
|
|
<p className="text-sm text-neutral-400 mb-4">You're on the free plan.</p>
|
|
<Link href="/pricing">
|
|
<Button variant="primary" className="text-sm">View Plans</Button>
|
|
</Link>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const planLabel = (() => {
|
|
const raw = subscription.plan_id?.startsWith('price_') ? 'Pro'
|
|
: subscription.plan_id === 'free' || !subscription.plan_id ? 'Free'
|
|
: subscription.plan_id
|
|
return raw === 'Free' || raw === 'Pro' ? raw : raw.charAt(0).toUpperCase() + raw.slice(1)
|
|
})()
|
|
|
|
const isActive = subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h3 className="text-base font-semibold text-white mb-1">Billing & Subscription</h3>
|
|
<p className="text-sm text-neutral-400">Manage your plan, usage, and payment details.</p>
|
|
</div>
|
|
|
|
{/* Plan card */}
|
|
<div className="rounded-xl border border-neutral-800 bg-neutral-800/30 p-4">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="flex items-center gap-3">
|
|
<h4 className="text-lg font-bold text-white">{planLabel} Plan</h4>
|
|
{isActive && (
|
|
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-green-900/30 text-green-400 border border-green-900/50">
|
|
{subscription.subscription_status === 'trialing' ? 'Trial' : 'Active'}
|
|
</span>
|
|
)}
|
|
{subscription.cancel_at_period_end && (
|
|
<span className="px-2 py-0.5 text-xs font-medium rounded-full bg-yellow-900/30 text-yellow-400 border border-yellow-900/50">
|
|
Cancelling
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Link href="/pricing">
|
|
<Button variant="primary" className="text-sm">Change Plan</Button>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* Usage stats */}
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
|
|
{typeof subscription.sites_count === 'number' && (
|
|
<div>
|
|
<p className="text-xs text-neutral-500 uppercase tracking-wider">Sites</p>
|
|
<p className="text-lg font-semibold text-white">{subscription.sites_count}</p>
|
|
</div>
|
|
)}
|
|
{subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
|
|
<div>
|
|
<p className="text-xs text-neutral-500 uppercase tracking-wider">Pageviews</p>
|
|
<p className="text-lg font-semibold text-white">{subscription.pageview_usage.toLocaleString()} / {subscription.pageview_limit.toLocaleString()}</p>
|
|
</div>
|
|
)}
|
|
{subscription.current_period_end && (
|
|
<div>
|
|
<p className="text-xs text-neutral-500 uppercase tracking-wider">
|
|
{subscription.cancel_at_period_end ? 'Ends' : 'Renews'}
|
|
</p>
|
|
<p className="text-lg font-semibold text-white">{formatDateLong(new Date(subscription.current_period_end))}</p>
|
|
</div>
|
|
)}
|
|
{subscription.pageview_limit > 0 && (
|
|
<div>
|
|
<p className="text-xs text-neutral-500 uppercase tracking-wider">Limit</p>
|
|
<p className="text-lg font-semibold text-white">{subscription.pageview_limit.toLocaleString()} / mo</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Actions */}
|
|
<div className="flex flex-wrap gap-3">
|
|
{subscription.has_payment_method && (
|
|
<Button onClick={handleManageBilling} variant="secondary" className="text-sm gap-1.5">
|
|
<ArrowSquareOut weight="bold" className="w-3.5 h-3.5" />
|
|
Update payment method
|
|
</Button>
|
|
)}
|
|
|
|
{isActive && !subscription.cancel_at_period_end && (
|
|
<Button
|
|
onClick={() => setShowCancelConfirm(true)}
|
|
variant="secondary"
|
|
className="text-sm text-neutral-400 hover:text-red-400"
|
|
>
|
|
Cancel subscription
|
|
</Button>
|
|
)}
|
|
|
|
{subscription.cancel_at_period_end && (
|
|
<Button onClick={handleResume} variant="secondary" className="text-sm text-brand-orange">
|
|
Resume subscription
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Cancel confirmation */}
|
|
<Modal isOpen={showCancelConfirm} onClose={() => setShowCancelConfirm(false)} title="Cancel subscription" className="max-w-md">
|
|
<p className="text-sm text-neutral-400 mb-1">
|
|
Are you sure you want to cancel your subscription?
|
|
</p>
|
|
{subscription.current_period_end && (
|
|
<p className="text-sm text-neutral-500 mb-5">
|
|
Your plan will remain active until {formatDateLong(new Date(subscription.current_period_end))}.
|
|
</p>
|
|
)}
|
|
<div className="flex justify-end gap-3">
|
|
<Button variant="secondary" className="text-sm" onClick={() => setShowCancelConfirm(false)} disabled={cancelling}>
|
|
Keep plan
|
|
</Button>
|
|
<Button
|
|
variant="primary"
|
|
className="text-sm bg-red-600 hover:bg-red-700 border-red-600 hover:border-red-700"
|
|
onClick={handleCancel}
|
|
disabled={cancelling}
|
|
>
|
|
{cancelling ? 'Cancelling...' : 'Yes, cancel'}
|
|
</Button>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Recent Invoices */}
|
|
{orders.length > 0 && (
|
|
<div className="space-y-2 pt-6 border-t border-neutral-800">
|
|
<h4 className="text-sm font-medium text-neutral-300">Recent Invoices</h4>
|
|
<div className="space-y-1">
|
|
{orders.map(order => (
|
|
<div key={order.id} className="flex items-center justify-between p-3 rounded-lg border border-neutral-800 text-sm">
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-neutral-300">{formatDate(new Date(order.created_at))}</span>
|
|
<span className="text-white font-medium">{formatAmount(order.amount, order.currency)}</span>
|
|
</div>
|
|
<span className={`text-xs px-2 py-0.5 rounded-full ${order.status === 'paid' ? 'bg-green-900/30 text-green-400' : 'bg-neutral-800 text-neutral-400'}`}>
|
|
{order.status === 'paid' ? 'Paid' : order.status}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|