feat: implement subscription limit check in NewSitePage; update HomePage to conditionally display site addition link or upgrade prompt based on subscription status

This commit is contained in:
Usman Baig
2026-01-31 22:45:11 +01:00
parent d8abd392ec
commit 472061113b
2 changed files with 37 additions and 3 deletions

View File

@@ -259,7 +259,18 @@ export default function HomePage() {
<h1 className="text-2xl font-bold text-neutral-900 dark:text-white">Your Sites</h1>
<p className="mt-1 text-sm text-neutral-500 dark:text-neutral-400">Manage your analytics sites and view insights.</p>
</div>
<Link href="/sites/new" className="btn-primary text-sm">Add New Site</Link>
{subscription?.plan_id === 'solo' && sites.length >= 1 ? (
<div className="flex items-center gap-3">
<span className="text-sm font-medium text-neutral-500 dark:text-neutral-400 bg-neutral-100 dark:bg-neutral-800 px-3 py-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700">
Limit reached (1/1)
</span>
<Link href="/pricing" className="btn-primary text-sm bg-brand-orange hover:bg-brand-orange/90 border-transparent text-white shadow-lg shadow-brand-orange/20">
Upgrade
</Link>
</div>
) : (
<Link href="/sites/new" className="btn-primary text-sm">Add New Site</Link>
)}
</div>
{/* * Global Overview */}

View File

@@ -1,8 +1,9 @@
'use client'
import { useState } from 'react'
import { useState, useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { createSite } from '@/lib/api/sites'
import { createSite, listSites } from '@/lib/api/sites'
import { getSubscription } from '@/lib/api/billing'
import { toast } from '@ciphera-net/ui'
import { Button, Input } from '@ciphera-net/ui'
@@ -14,6 +15,28 @@ export default function NewSitePage() {
domain: '',
})
// * Check for plan limits on mount
useEffect(() => {
const checkLimits = async () => {
try {
const [sites, subscription] = await Promise.all([
listSites(),
getSubscription()
])
if (subscription?.plan_id === 'solo' && sites.length >= 1) {
toast.error('Solo plan limit reached (1 site). Please upgrade to add more sites.')
router.replace('/')
}
} catch (error) {
// Ignore errors here, let the backend handle the hard check on submit
console.error('Failed to check limits', error)
}
}
checkLimits()
}, [router])
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setLoading(true)