Merge pull request #32 from ciphera-net/staging

[PULSE-57] Billing UX: renewal display, design fixes, React crash fix

CHANGELOG.md

@@ -6,6 +6,28 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ## [Unreleased]
 
+## [0.8.0-alpha] - 2026-02-20
+
+### Added
+
+- **Renewal date and amount.** The dashboard and billing tab now show when your subscription renews and how much you'll be charged.
+- **Invoice preview when changing plans.** Before you switch plans, you can see exactly what your next invoice will be (including prorations).
+- **Pay now for open invoices.** Unpaid invoices show a clear "Pay now" button so you can settle them quickly.
+- **Enterprise contact.** The pricing page Enterprise plan now links to email us directly instead of checkout.
+- **Past due alert.** If your payment fails, a red banner appears with a link to update your payment method.
+- **Pageview usage bar.** Your billing card shows a color-coded bar so you can see at a glance how close you are to your limit (green, then amber, then red).
+
+### Changed
+
+- **Change plan flow.** Cleaner plan selector with Solo, Team, and Business options. Shows which plan you're on and a preview of your next invoice. If the preview can't be calculated, you'll see a friendly message instead of a blank screen.
+- **Billing tab layout.** Improved spacing, clearer headings, and better focus when using keyboard navigation.
+- **Pricing page layout.** Updated spacing and typography. Slider and billing toggle are more accessible.
+- **Billing Portal return.** After updating your payment method in Stripe's portal, you're taken back to the billing tab instead of the general settings page.
+
+### Fixed
+
+- **Theme toggle crash.** Fixed a crash that could occur when switching between light and dark mode on the pricing page and then opening organization settings.
+
 ## [0.7.0-alpha] - 2026-02-17
 
 ### Changed
@@ -82,7 +104,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 
 ---
 
-[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.7.0-alpha...HEAD
+[Unreleased]: https://github.com/ciphera-net/pulse/compare/v0.8.0-alpha...HEAD
+[0.8.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.7.0-alpha...v0.8.0-alpha
 [0.7.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.6.0-alpha...v0.7.0-alpha
 [0.6.0-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.1-alpha...v0.6.0-alpha
 [0.5.1-alpha]: https://github.com/ciphera-net/pulse/compare/v0.5.0-alpha...v0.5.1-alpha

app/page.tsx

@@ -13,6 +13,7 @@ import { Button } from '@ciphera-net/ui'
 import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon, GlobeIcon } from '@ciphera-net/ui'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
+import { getSitesLimitForPlan } from '@/lib/plans'
 
 function DashboardPreview() {
   return (
@@ -337,10 +338,13 @@ 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>
-        {subscription?.plan_id === 'solo' && sites.length >= 1 ? (
+        {(() => {
+          const siteLimit = getSitesLimitForPlan(subscription?.plan_id)
+          const atLimit = siteLimit != null && sites.length >= siteLimit
+          return atLimit ? (
           <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)
+              Limit reached ({sites.length}/{siteLimit})
             </span>
             <Link href="/pricing">
               <Button variant="primary" className="text-sm">
@@ -348,7 +352,8 @@ export default function HomePage() {
               </Button>
             </Link>
           </div>
-        ) : (
+        ) : null
+        })() ?? (
           <Link href="/sites/new">
             <Button variant="primary" className="text-sm">
               Add New Site
@@ -385,15 +390,34 @@ export default function HomePage() {
                   return `${label} Plan`
                 })()}
               </p>
-              {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number')) && (
+              {(typeof subscription.sites_count === 'number' || (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') || (subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing'))) && (
                 <p className="text-sm text-neutral-600 dark:text-neutral-400 mt-1">
                   {typeof subscription.sites_count === 'number' && (
-                    <span>Sites: {subscription.plan_id === 'solo' && subscription.sites_count > 0 ? `${subscription.sites_count}/1` : subscription.sites_count}</span>
+                    <span>Sites: {(() => {
+                      const limit = getSitesLimitForPlan(subscription.plan_id)
+                      return limit != null && typeof subscription.sites_count === 'number' ? `${subscription.sites_count}/${limit}` : subscription.sites_count
+                    })()}</span>
                   )}
-                  {typeof subscription.sites_count === 'number' && subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && ' · '}
+                  {typeof subscription.sites_count === 'number' && (subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number') && ' · '}
                   {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
                     <span>Pageviews: {subscription.pageview_usage.toLocaleString()}/{subscription.pageview_limit.toLocaleString()}</span>
                   )}
+                  {subscription.next_invoice_amount_due != null && subscription.next_invoice_currency && !subscription.cancel_at_period_end && (subscription.subscription_status === 'active' || subscription.subscription_status === 'trialing') && (
+                    <span className="block mt-1">
+                      Renews {(() => {
+                        const ts = subscription.next_invoice_period_end ?? subscription.current_period_end
+                        const d = ts ? new Date(typeof ts === 'number' ? ts * 1000 : ts) : null
+                        const dateStr = d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
+                          ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+                          : null
+                        const amount = (subscription.next_invoice_amount_due / 100).toLocaleString('en-US', {
+                          style: 'currency',
+                          currency: subscription.next_invoice_currency.toUpperCase(),
+                        })
+                        return dateStr ? `${dateStr} for ${amount}` : amount
+                      })()}
+                    </span>
+                  )}
                 </p>
               )}
               <div className="mt-2 flex gap-2">

app/settings/page.tsx

@@ -1,6 +1,4 @@
-import { Suspense } from 'react'
 import ProfileSettings from '@/components/settings/ProfileSettings'
-import CheckoutSuccessToast from '@/components/checkout/CheckoutSuccessToast'
 
 export const metadata = {
   title: 'Settings - Pulse',
@@ -10,9 +8,6 @@ export const metadata = {
 export default function SettingsPage() {
   return (
     <div className="min-h-screen pt-12 pb-12 px-4 sm:px-6">
-      <Suspense fallback={null}>
-        <CheckoutSuccessToast />
-      </Suspense>
       <ProfileSettings />
     </div>
   )

app/sites/new/page.tsx

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
 import Link from 'next/link'
 import { createSite, listSites, getSite, type Site } from '@/lib/api/sites'
 import { getSubscription } from '@/lib/api/billing'
+import { getSitesLimitForPlan } from '@/lib/plans'
 import { trackSiteCreatedFromDashboard, trackSiteCreatedScriptCopied } from '@/lib/welcomeAnalytics'
 import { toast } from '@ciphera-net/ui'
 import { getAuthErrorMessage } from '@ciphera-net/ui'
@@ -57,9 +58,10 @@ export default function NewSitePage() {
           getSubscription()
         ])
 
-        if (subscription?.plan_id === 'solo' && sites.length >= 1) {
+        const siteLimit = subscription?.plan_id ? getSitesLimitForPlan(subscription.plan_id) : null
+        if (siteLimit != null && sites.length >= siteLimit) {
           setAtLimit(true)
-          toast.error('Solo plan limit reached (1 site). Please upgrade to add more sites.')
+          toast.error(`${subscription.plan_id} plan limit reached (${siteLimit} site${siteLimit === 1 ? '' : 's'}). Please upgrade to add more sites.`)
           router.replace('/')
         }
       } catch (error) {

components/PricingSection.tsx

@@ -219,10 +219,10 @@ export default function PricingSection() {
         transition={{ duration: 0.5 }}
         className="text-center mb-12"
       >
-        <h2 className="text-2xl font-bold text-neutral-900 dark:text-white mb-6">
+        <h2 className="text-3xl font-bold text-neutral-900 dark:text-white mb-4">
           Transparent Pricing
         </h2>
-        <p className="text-xl text-neutral-600 dark:text-neutral-400">
+        <p className="text-lg text-neutral-600 dark:text-neutral-400">
           Scale with your traffic. No hidden fees.
         </p>
       </motion.div>
@@ -232,11 +232,11 @@ export default function PricingSection() {
         initial={{ opacity: 0, y: 20 }}
         animate={{ opacity: 1, y: 0 }}
         transition={{ duration: 0.5, delay: 0.1 }}
-        className="max-w-6xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-3xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
+        className="max-w-6xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-2xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20"
       >
         
         {/* Top Toolbar */}
-        <div className="p-8 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
+        <div className="p-6 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
           <div className="w-full md:w-2/3">
             <div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
               <span>10k</span>
@@ -252,7 +252,9 @@ export default function PricingSection() {
               step="1"
               value={sliderIndex}
               onChange={(e) => setSliderIndex(parseInt(e.target.value))}
-              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
+              aria-label="Monthly pageview limit"
+              aria-valuetext={`${currentTraffic.label} pageviews per month`}
+              className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange focus:outline-none focus:ring-2 focus:ring-brand-orange focus:ring-offset-2"
             />
           </div>
 
@@ -260,10 +262,12 @@ export default function PricingSection() {
             <span className="text-[10px] text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
               Get 1 month free with yearly
             </span>
-            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex">
+            <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex" role="radiogroup" aria-label="Billing interval">
               <button
                 onClick={() => setIsYearly(false)}
-                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                role="radio"
+                aria-checked={!isYearly}
+                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-brand-orange ${
                   !isYearly
                     ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
                     : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
@@ -273,7 +277,9 @@ export default function PricingSection() {
               </button>
               <button
                 onClick={() => setIsYearly(true)}
-                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                role="radio"
+                aria-checked={isYearly}
+                className={`min-w-[88px] px-4 py-2 rounded-lg text-sm font-medium transition-all focus:outline-none focus:ring-2 focus:ring-brand-orange ${
                   isYearly
                     ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
                     : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
@@ -292,7 +298,7 @@ export default function PricingSection() {
             const isTeam = plan.id === 'team'
 
             return (
-              <div key={plan.id} className={`p-8 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
+              <div key={plan.id} className={`p-6 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
                 {isTeam && (
                   <>
                     <div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
@@ -361,7 +367,7 @@ export default function PricingSection() {
           })}
 
           {/* Enterprise Section */}
-          <div className="p-8 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
+          <div className="p-6 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
             <div className="mb-8">
               <h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
               <p className="text-sm text-neutral-500 min-h-[40px] mb-4">For high volume sites and custom needs</p>
@@ -370,9 +376,12 @@ export default function PricingSection() {
               </div>
             </div>
 
-            <Button variant="secondary" className="w-full mb-8 border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800">
+            <a
+              href="mailto:business@ciphera.net?subject=Enterprise%20Plan%20Inquiry"
+              className="inline-flex items-center justify-center w-full mb-8 rounded-lg border border-neutral-200 dark:border-neutral-700 px-4 py-2 text-sm font-medium text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange"
+            >
               Contact us
-            </Button>
+            </a>
 
             <ul className="space-y-4">
               {[

components/checkout/CheckoutSuccessToast.tsx

@@ -1,26 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-import { useSearchParams } from 'next/navigation'
-import { toast } from '@ciphera-net/ui'
-
-/**
- * Shows a success toast when redirected from Stripe Checkout with success=true,
- * then clears the query params from the URL.
- */
-export default function CheckoutSuccessToast() {
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    const success = searchParams.get('success')
-    if (success === 'true') {
-      toast.success('Thank you for subscribing! Your subscription is now active.')
-      const url = new URL(window.location.href)
-      url.searchParams.delete('success')
-      url.searchParams.delete('session_id')
-      window.history.replaceState({}, '', url.pathname + url.search)
-    }
-  }, [searchParams])
-
-  return null
-}

components/settings/OrganizationSettings.tsx

@@ -16,8 +16,8 @@ import {
   OrganizationInvitation,
   Organization
 } from '@/lib/api/organization'
-import { getSubscription, createPortalSession, getInvoices, cancelSubscription, changePlan, createCheckoutSession, SubscriptionDetails, Invoice } from '@/lib/api/billing'
-import { TRAFFIC_TIERS, PLAN_ID_SOLO, getTierIndexForLimit, getLimitForTierIndex } from '@/lib/plans'
+import { getSubscription, createPortalSession, getInvoices, cancelSubscription, resumeSubscription, changePlan, previewInvoice, createCheckoutSession, SubscriptionDetails, Invoice, PreviewInvoiceResult } from '@/lib/api/billing'
+import { TRAFFIC_TIERS, PLAN_ID_SOLO, PLAN_ID_TEAM, PLAN_ID_BUSINESS, getTierIndexForLimit, getLimitForTierIndex, getSitesLimitForPlan } from '@/lib/plans'
 import { getAuditLog, AuditLogEntry, GetAuditLogParams } from '@/lib/api/audit'
 import { getNotificationSettings, updateNotificationSettings } from '@/lib/api/notification-settings'
 import { toast } from '@ciphera-net/ui'
@@ -83,9 +83,13 @@ export default function OrganizationSettings() {
   const [isRedirectingToPortal, setIsRedirectingToPortal] = useState(false)
   const [cancelLoadingAction, setCancelLoadingAction] = useState<'period_end' | 'immediate' | null>(null)
   const [showCancelPrompt, setShowCancelPrompt] = useState(false)
+  const [isResuming, setIsResuming] = useState(false)
   const [showChangePlanModal, setShowChangePlanModal] = useState(false)
+  const [changePlanId, setChangePlanId] = useState<string>(PLAN_ID_SOLO)
   const [changePlanTierIndex, setChangePlanTierIndex] = useState(2)
   const [changePlanYearly, setChangePlanYearly] = useState(false)
+  const [invoicePreview, setInvoicePreview] = useState<PreviewInvoiceResult | null>(null)
+  const [isLoadingPreview, setIsLoadingPreview] = useState(false)
   const [isChangingPlan, setIsChangingPlan] = useState(false)
   const [invoices, setInvoices] = useState<Invoice[]>([])
   const [isLoadingInvoices, setIsLoadingInvoices] = useState(false)
@@ -294,6 +298,25 @@ export default function OrganizationSettings() {
     }
   }, [activeTab, user?.role, handleTabChange])
 
+  const hasActiveSubscription = subscription?.subscription_status === 'active' || subscription?.subscription_status === 'trialing'
+
+  useEffect(() => {
+    if (!showChangePlanModal || !hasActiveSubscription) {
+      setInvoicePreview(null)
+      return
+    }
+    let cancelled = false
+    setIsLoadingPreview(true)
+    setInvoicePreview(null)
+    const interval = changePlanYearly ? 'year' : 'month'
+    const limit = getLimitForTierIndex(changePlanTierIndex)
+    previewInvoice({ plan_id: changePlanId, interval, limit })
+      .then((res) => { if (!cancelled) setInvoicePreview(res ?? null) })
+      .catch(() => { if (!cancelled) { setInvoicePreview(null) } })
+      .finally(() => { if (!cancelled) setIsLoadingPreview(false) })
+    return () => { cancelled = true }
+  }, [showChangePlanModal, hasActiveSubscription, changePlanId, changePlanTierIndex, changePlanYearly])
+
   // If no org ID, we are in personal organization context, so don't show org settings
   if (!currentOrgId) {
     return (
@@ -328,30 +351,48 @@ export default function OrganizationSettings() {
     }
   }
 
+  const handleResumeSubscription = async () => {
+    setIsResuming(true)
+    try {
+      await resumeSubscription()
+      toast.success('Subscription will continue. Cancellation has been undone.')
+      loadSubscription()
+    } catch (error: any) {
+      toast.error(getAuthErrorMessage(error) || error.message || 'Failed to resume subscription')
+    } finally {
+      setIsResuming(false)
+    }
+  }
+
   const openChangePlanModal = () => {
+    const currentPlan = subscription?.plan_id
+    if (currentPlan === PLAN_ID_TEAM || currentPlan === PLAN_ID_BUSINESS) {
+      setChangePlanId(currentPlan)
+    } else {
+      setChangePlanId(PLAN_ID_SOLO)
+    }
     if (subscription?.pageview_limit != null && subscription.pageview_limit > 0) {
       setChangePlanTierIndex(getTierIndexForLimit(subscription.pageview_limit))
     } else {
       setChangePlanTierIndex(2)
     }
     setChangePlanYearly(subscription?.billing_interval === 'year')
+    setInvoicePreview(null)
     setShowChangePlanModal(true)
   }
 
-  const hasActiveSubscription = subscription?.subscription_status === 'active' || subscription?.subscription_status === 'trialing'
-
   const handleChangePlanSubmit = async () => {
     const interval = changePlanYearly ? 'year' : 'month'
     const limit = getLimitForTierIndex(changePlanTierIndex)
     setIsChangingPlan(true)
     try {
       if (hasActiveSubscription) {
-        await changePlan({ plan_id: PLAN_ID_SOLO, interval, limit })
+        await changePlan({ plan_id: changePlanId, interval, limit })
         toast.success('Plan updated. Changes may take a moment to reflect.')
         setShowChangePlanModal(false)
         loadSubscription()
       } else {
-        const { url } = await createCheckoutSession({ plan_id: PLAN_ID_SOLO, interval, limit })
+        const { url } = await createCheckoutSession({ plan_id: changePlanId, interval, limit })
         if (url) window.location.href = url
         else throw new Error('No checkout URL')
       }
@@ -811,21 +852,55 @@ export default function OrganizationSettings() {
                       </div>
                     )}
 
+                    {/* Past due notice */}
+                    {subscription.subscription_status === 'past_due' && (
+                      <div className="p-4 bg-red-50 dark:bg-red-900/10 border border-red-200 dark:border-red-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                        <div className="flex-1">
+                          <p className="text-sm font-medium text-red-800 dark:text-red-200">
+                            Payment past due
+                          </p>
+                          <p className="text-xs text-red-700 dark:text-red-300 mt-0.5">
+                            We couldn't charge your payment method. Please update your billing info to avoid service interruption.
+                          </p>
+                        </div>
+                        <Button
+                          variant="secondary"
+                          onClick={handleManageSubscription}
+                          disabled={isRedirectingToPortal}
+                          isLoading={isRedirectingToPortal}
+                          className="shrink-0"
+                        >
+                          Update payment method
+                        </Button>
+                      </div>
+                    )}
+
                     {/* Cancel-at-period-end notice */}
                     {subscription.cancel_at_period_end && (
-                      <div className="p-4 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl">
-                        <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
-                          Your subscription will end on{' '}
-                          <span className="font-semibold">
-                            {(() => {
-                              const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                              return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' }) : '—'
-                            })()}
-                          </span>
-                        </p>
-                        <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
-                          You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
-                        </p>
+                      <div className="p-4 bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-800 rounded-2xl flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+                        <div>
+                          <p className="text-sm font-medium text-amber-800 dark:text-amber-200">
+                            Your subscription will end on{' '}
+                            <span className="font-semibold">
+                              {(() => {
+                                const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
+                                return d && !Number.isNaN(d.getTime()) ? d.toLocaleDateString(undefined, { month: 'long', day: 'numeric', year: 'numeric' }) : '—'
+                              })()}
+                            </span>
+                          </p>
+                          <p className="text-xs text-amber-700 dark:text-amber-300 mt-1">
+                            You keep full access until then. Your data is retained for 30 days after. Use "Change plan" to resubscribe.
+                          </p>
+                        </div>
+                        <Button
+                          variant="secondary"
+                          onClick={handleResumeSubscription}
+                          disabled={isResuming}
+                          isLoading={isResuming}
+                          className="shrink-0"
+                        >
+                          Keep my subscription
+                        </Button>
                       </div>
                     )}
 
@@ -842,9 +917,11 @@ export default function OrganizationSettings() {
                               ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
                               : subscription.subscription_status === 'trialing'
                               ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-300'
+                              : subscription.subscription_status === 'past_due'
+                              ? 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
                               : 'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300'
                           }`}>
-                            {subscription.subscription_status === 'trialing' ? 'Trial' : (subscription.subscription_status || 'Free')}
+                            {subscription.subscription_status === 'trialing' ? 'Trial' : subscription.subscription_status === 'past_due' ? 'Past Due' : (subscription.subscription_status || 'Free')}
                           </span>
                           {subscription.billing_interval && (
                             <span className="text-xs text-neutral-500 capitalize">
@@ -856,16 +933,33 @@ export default function OrganizationSettings() {
                           Change plan
                         </Button>
                       </div>
+                      {(subscription.business_name || (subscription.tax_ids && subscription.tax_ids.length > 0)) && (
+                        <div className="px-6 pb-2 -mt-2 space-y-1 text-sm text-neutral-500 dark:text-neutral-400">
+                          {subscription.business_name && (
+                            <div>Billing for: {subscription.business_name}</div>
+                          )}
+                          {subscription.tax_ids && subscription.tax_ids.length > 0 && (
+                            <div>
+                              Tax ID{subscription.tax_ids.length > 1 ? 's' : ''}:{' '}
+                              {subscription.tax_ids.map((t) => {
+                                const label = t.type === 'eu_vat' ? 'VAT' : t.type === 'us_ein' ? 'EIN' : t.type.replace(/_/g, ' ').toUpperCase()
+                                return `${label} ${t.value}${t.country ? ` (${t.country})` : ''}`
+                              }).join(', ')}
+                            </div>
+                          )}
+                        </div>
+                      )}
 
                       {/* Usage stats */}
-                      <div className="border-t border-neutral-200 dark:border-neutral-800 px-6 py-5 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
+                      <div className="border-t border-neutral-200 dark:border-neutral-800 p-6 grid grid-cols-2 md:grid-cols-4 gap-y-4 gap-x-6">
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">Sites</div>
                           <div className="text-lg font-semibold text-neutral-900 dark:text-white">
                             {typeof subscription.sites_count === 'number'
-                              ? subscription.plan_id === 'solo'
-                                ? `${subscription.sites_count} / 1`
-                                : `${subscription.sites_count}`
+                              ? (() => {
+                                  const limit = getSitesLimitForPlan(subscription.plan_id)
+                                  return limit != null ? `${subscription.sites_count} / ${limit}` : `${subscription.sites_count}`
+                                })()
                               : '—'}
                           </div>
                         </div>
@@ -876,6 +970,22 @@ export default function OrganizationSettings() {
                               ? `${subscription.pageview_usage.toLocaleString()} / ${subscription.pageview_limit.toLocaleString()}`
                               : '—'}
                           </div>
+                          {subscription.pageview_limit > 0 && typeof subscription.pageview_usage === 'number' && (
+                            <div className="mt-2 h-1.5 w-full rounded-full bg-neutral-200 dark:bg-neutral-700 overflow-hidden">
+                              <div
+                                className={`h-full rounded-full transition-all ${
+                                  subscription.pageview_usage / subscription.pageview_limit >= 1
+                                    ? 'bg-red-500'
+                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.9
+                                    ? 'bg-red-400'
+                                    : subscription.pageview_usage / subscription.pageview_limit >= 0.8
+                                    ? 'bg-amber-400'
+                                    : 'bg-green-500'
+                                }`}
+                                style={{ width: `${Math.min(100, (subscription.pageview_usage / subscription.pageview_limit) * 100)}%` }}
+                              />
+                            </div>
+                          )}
                         </div>
                         <div>
                           <div className="text-xs text-neutral-500 uppercase tracking-wider mb-1">
@@ -883,8 +993,18 @@ export default function OrganizationSettings() {
                           </div>
                           <div className="text-lg font-semibold text-neutral-900 dark:text-white">
                             {(() => {
-                              const d = subscription.current_period_end ? new Date(subscription.current_period_end as string) : null
-                              return d && !Number.isNaN(d.getTime()) && d.getTime() !== 0 ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '—'
+                              const ts = subscription.next_invoice_period_end ?? subscription.current_period_end
+                              const d = ts ? new Date(typeof ts === 'number' ? ts * 1000 : ts) : null
+                              const dateStr = d && !Number.isNaN(d.getTime()) && d.getTime() !== 0
+                                ? d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
+                                : '—'
+                              const amount = subscription.next_invoice_amount_due != null && subscription.next_invoice_currency
+                                ? (subscription.next_invoice_amount_due / 100).toLocaleString('en-US', {
+                                    style: 'currency',
+                                    currency: subscription.next_invoice_currency.toUpperCase(),
+                                  })
+                                : null
+                              return amount && dateStr !== '—' ? `${dateStr} for ${amount}` : dateStr
                             })()}
                           </div>
                         </div>
@@ -904,7 +1024,7 @@ export default function OrganizationSettings() {
                           type="button"
                           onClick={handleManageSubscription}
                           disabled={isRedirectingToPortal}
-                          className="inline-flex items-center gap-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50"
+                          className="inline-flex items-center gap-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-brand-orange focus:rounded"
                         >
                           <ExternalLinkIcon className="w-4 h-4" />
                           Payment method & invoices
@@ -914,7 +1034,7 @@ export default function OrganizationSettings() {
                         <button
                           type="button"
                           onClick={() => setShowCancelPrompt(true)}
-                          className="inline-flex items-center gap-1.5 rounded-lg border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors"
+                          className="inline-flex items-center gap-1.5 rounded-xl border border-neutral-200 dark:border-neutral-700 px-3.5 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:border-red-300 hover:text-red-600 dark:hover:border-red-800 dark:hover:text-red-400 transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2"
                         >
                           Cancel subscription
                         </button>
@@ -923,7 +1043,7 @@ export default function OrganizationSettings() {
 
                     {/* Invoice History */}
                     <div>
-                      <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-3">Recent invoices</h3>
+                      <h3 className="text-lg font-semibold text-neutral-900 dark:text-white mb-3">Recent invoices</h3>
                       <div className="bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-2xl overflow-hidden divide-y divide-neutral-200 dark:divide-neutral-800">
                         {isLoadingInvoices ? (
                           <div className="flex items-center justify-center py-8">
@@ -957,14 +1077,21 @@ export default function OrganizationSettings() {
                                   </span>
                                   {invoice.invoice_pdf && (
                                     <a href={invoice.invoice_pdf} target="_blank" rel="noopener noreferrer"
-                                       className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg transition-colors" title="Download PDF">
-                                      <DownloadIcon className="w-4 h-4" />
+                                       className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange" title="Download PDF">
+                                      <DownloadIcon className="w-3.5 h-3.5" />
+                                      Download PDF
                                     </a>
                                   )}
                                   {invoice.hosted_invoice_url && (
                                     <a href={invoice.hosted_invoice_url} target="_blank" rel="noopener noreferrer"
-                                       className="p-1.5 text-neutral-400 hover:text-neutral-900 dark:hover:text-white rounded-lg transition-colors" title="View invoice">
-                                      <ExternalLinkIcon className="w-4 h-4" />
+                                       className={`inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                                         invoice.status === 'open'
+                                           ? 'bg-brand-orange text-white hover:bg-brand-orange-hover'
+                                           : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800'
+                                       }`}
+                                       title={invoice.status === 'open' ? 'Pay now' : 'View invoice'}>
+                                      <ExternalLinkIcon className="w-3.5 h-3.5" />
+                                      {invoice.status === 'open' ? 'Pay now' : 'View invoice'}
                                     </a>
                                   )}
                                 </div>
@@ -1338,8 +1465,9 @@ export default function OrganizationSettings() {
                 <button
                   type="button"
                   onClick={() => setShowChangePlanModal(false)}
-                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400"
+                  className="text-neutral-500 hover:text-neutral-700 dark:hover:text-neutral-400 focus:outline-none focus:ring-2 focus:ring-brand-orange rounded-lg p-1"
                   disabled={isChangingPlan}
+                  aria-label="Close dialog"
                 >
                   <XIcon className="w-5 h-5" />
                 </button>
@@ -1348,6 +1476,41 @@ export default function OrganizationSettings() {
                 Choose your pageview limit and billing interval. {hasActiveSubscription ? 'Your next invoice will reflect prorations.' : 'You’ll start a new subscription.'}
               </p>
               <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Plan</label>
+                  <div className="grid grid-cols-3 gap-2">
+                    {([
+                      { id: PLAN_ID_SOLO, name: 'Solo', sites: '1 site' },
+                      { id: PLAN_ID_TEAM, name: 'Team', sites: 'Up to 5 sites' },
+                      { id: PLAN_ID_BUSINESS, name: 'Business', sites: 'Up to 10 sites' },
+                    ] as const).map((plan) => {
+                      const isCurrentPlan = subscription?.plan_id === plan.id
+                      const isSelected = changePlanId === plan.id
+                      return (
+                        <button
+                          key={plan.id}
+                          type="button"
+                          onClick={() => setChangePlanId(plan.id)}
+                          className={`relative p-3 rounded-xl border text-left transition-all focus:outline-none focus:ring-2 focus:ring-brand-orange ${
+                            isSelected
+                              ? 'border-brand-orange bg-brand-orange/5 dark:bg-brand-orange/10'
+                              : 'border-neutral-200 dark:border-neutral-700 hover:border-neutral-300 dark:hover:border-neutral-600'
+                          }`}
+                        >
+                          <span className={`block text-sm font-semibold ${isSelected ? 'text-brand-orange' : 'text-neutral-900 dark:text-white'}`}>
+                            {plan.name}
+                          </span>
+                          <span className="block text-xs text-neutral-500 mt-0.5">{plan.sites}</span>
+                          {isCurrentPlan && (
+                            <span className="absolute -top-2 right-2 px-1.5 py-0.5 text-[10px] font-medium bg-neutral-100 dark:bg-neutral-800 text-neutral-600 dark:text-neutral-400 rounded-full border border-neutral-200 dark:border-neutral-700">
+                              Current
+                            </span>
+                          )}
+                        </button>
+                      )
+                    })}
+                  </div>
+                </div>
                 <div>
                   <label className="block text-sm font-medium text-neutral-700 dark:text-neutral-300 mb-2">Pageviews per month</label>
                   <select
@@ -1368,20 +1531,44 @@ export default function OrganizationSettings() {
                     <button
                       type="button"
                       onClick={() => setChangePlanYearly(false)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${!changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
+                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${!changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
                     >
                       Monthly
                     </button>
                     <button
                       type="button"
                       onClick={() => setChangePlanYearly(true)}
-                      className={`flex-1 py-2 text-sm font-medium rounded-md transition-colors ${changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
+                      className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange ${changePlanYearly ? 'bg-brand-orange text-white' : 'text-neutral-600 dark:text-neutral-400 hover:bg-neutral-100 dark:hover:bg-neutral-800'}`}
                     >
                       Yearly
                     </button>
                   </div>
                 </div>
               </div>
+              {hasActiveSubscription && (
+                <div className="mt-4 p-4 rounded-lg bg-neutral-100 dark:bg-neutral-800/50 border border-neutral-200 dark:border-neutral-700">
+                  {isLoadingPreview ? (
+                    <div className="flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
+                      <Spinner className="w-4 h-4" />
+                      Calculating next invoice…
+                    </div>
+                  ) : invoicePreview ? (
+                    <p className="text-sm text-neutral-700 dark:text-neutral-300">
+                      Next invoice:{' '}
+                      {(invoicePreview.amount_due / 100).toLocaleString('en-US', {
+                        style: 'currency',
+                        currency: invoicePreview.currency.toUpperCase(),
+                      })}{' '}
+                      on {new Date(invoicePreview.period_end * 1000).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })}{' '}
+                      <span className="text-neutral-500">(prorated)</span>
+                    </p>
+                  ) : (
+                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                      Unable to calculate preview. Your next invoice will reflect prorations.
+                    </p>
+                  )}
+                </div>
+              )}
               <div className="flex gap-2 mt-6">
                 <Button
                   onClick={handleChangePlanSubmit}

lib/api/billing.ts

@@ -1,5 +1,11 @@
 import { API_URL } from './client'
 
+export interface TaxID {
+  type: string
+  value: string
+  country?: string
+}
+
 export interface SubscriptionDetails {
   plan_id: string
   subscription_status: string
@@ -13,6 +19,16 @@ export interface SubscriptionDetails {
   sites_count?: number
   /** Pageviews in current billing period (when pageview_limit > 0). Present when backend supports usage API. */
   pageview_usage?: number
+  /** Business name from Stripe Tax ID collection / business purchase flow (optional). */
+  business_name?: string
+  /** Tax IDs collected on the Stripe customer (VAT, EIN, etc.) for invoice verification. */
+  tax_ids?: TaxID[]
+  /** Next invoice amount in cents (for "Renews on X for €Y" display). */
+  next_invoice_amount_due?: number
+  /** Currency for next invoice (e.g. eur). */
+  next_invoice_currency?: string
+  /** Unix timestamp when next invoice period ends. */
+  next_invoice_period_end?: number
 }
 
 async function billingFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
@@ -64,12 +80,36 @@ export async function cancelSubscription(params?: CancelSubscriptionParams): Pro
   })
 }
 
+/** Clears cancel_at_period_end so the subscription continues past the current period. */
+export async function resumeSubscription(): Promise<{ ok: boolean }> {
+  return await billingFetch<{ ok: boolean }>('/api/billing/resume', {
+    method: 'POST',
+  })
+}
+
 export interface ChangePlanParams {
   plan_id: string
   interval: string
   limit: number
 }
 
+export interface PreviewInvoiceResult {
+  amount_due: number
+  currency: string
+  period_end: number
+}
+
+export async function previewInvoice(params: ChangePlanParams): Promise<PreviewInvoiceResult | null> {
+  const res = await billingFetch<PreviewInvoiceResult | Record<string, never>>('/api/billing/preview-invoice', {
+    method: 'POST',
+    body: JSON.stringify(params),
+  })
+  if (res && typeof res === 'object' && 'amount_due' in res && typeof (res as PreviewInvoiceResult).amount_due === 'number') {
+    return res as PreviewInvoiceResult
+  }
+  return null
+}
+
 export async function changePlan(params: ChangePlanParams): Promise<{ ok: boolean }> {
   return await billingFetch<{ ok: boolean }>('/api/billing/change-plan', {
     method: 'POST',

lib/plans.ts

@@ -1,9 +1,22 @@
 /**
  * Shared plan and traffic tier definitions for pricing and billing (Change plan).
- * Backend supports plan_id "solo" and limit 10k–10M; month/year interval.
+ * Backend supports plan_id solo, team, business and limit 10k–10M; month/year interval.
  */
 
 export const PLAN_ID_SOLO = 'solo'
+export const PLAN_ID_TEAM = 'team'
+export const PLAN_ID_BUSINESS = 'business'
+
+/** Sites limit per plan. Returns null for free (no limit enforced in UI). */
+export function getSitesLimitForPlan(planId: string | null | undefined): number | null {
+  if (!planId || planId === 'free') return null
+  switch (planId) {
+    case 'solo': return 1
+    case 'team': return 5
+    case 'business': return 10
+    default: return null
+  }
+}
 
 /** Traffic tiers available for Solo plan (pageview limits). */
 export const TRAFFIC_TIERS = [

package-lock.json

@@ -1,16 +1,18 @@
 {
   "name": "pulse-frontend",
-  "version": "0.6.0-alpha",
+  "version": "0.7.0-alpha",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "pulse-frontend",
-      "version": "0.6.0-alpha",
+      "version": "0.7.0-alpha",
       "dependencies": {
         "@ciphera-net/ui": "^0.0.57",
         "@ducanh2912/next-pwa": "^10.2.9",
         "@radix-ui/react-icons": "^1.3.0",
+        "@stripe/react-stripe-js": "^5.6.0",
+        "@stripe/stripe-js": "^8.7.0",
         "axios": "^1.13.2",
         "country-flag-icons": "^1.6.4",
         "d3-scale": "^4.0.2",
@@ -2715,6 +2717,30 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@stripe/react-stripe-js": {
+      "version": "5.6.0",
+      "resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.6.0.tgz",
+      "integrity": "sha512-tucu/vTGc+5NXbo2pUiaVjA4ENdRBET8qGS00BM4BAU8J4Pi3eY6BHollsP2+VSuzzlvXwMg0it3ZLhbCj2fPg==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.7.2"
+      },
+      "peerDependencies": {
+        "@stripe/stripe-js": ">=8.0.0 <9.0.0",
+        "react": ">=16.8.0 <20.0.0",
+        "react-dom": ">=16.8.0 <20.0.0"
+      }
+    },
+    "node_modules/@stripe/stripe-js": {
+      "version": "8.7.0",
+      "resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.7.0.tgz",
+      "integrity": "sha512-tNUerSstwNC1KuHgX4CASGO0Md3CB26IJzSXmVlSuFvhsBP4ZaEPpY4jxWOn9tfdDscuVT4Kqb8cZ2o9nLCgRQ==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12.16"
+      }
+    },
     "node_modules/@surma/rollup-plugin-off-main-thread": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pulse-frontend",
-  "version": "0.7.0-alpha",
+  "version": "0.8.0-alpha",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -13,6 +13,8 @@
     "@ciphera-net/ui": "^0.0.57",
     "@ducanh2912/next-pwa": "^10.2.9",
     "@radix-ui/react-icons": "^1.3.0",
+    "@stripe/react-stripe-js": "^5.6.0",
+    "@stripe/stripe-js": "^8.7.0",
     "axios": "^1.13.2",
     "country-flag-icons": "^1.6.4",
     "d3-scale": "^4.0.2",