From fa3982001dabab30fb4a9cd7d9fe079f4250a84b Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 20 Feb 2026 18:05:59 +0100
Subject: [PATCH] feat: enhance HomePage and OrganizationSettings to display
 detailed subscription information and improve user interaction with invoice
 links

---
 app/page.tsx                                 | 20 ++++++++++++++++++--
 components/PricingSection.tsx                |  7 +++++--
 components/settings/OrganizationSettings.tsx | 10 ++++++++--
 3 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index de34a12..651227f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -390,7 +390,7 @@ 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: {(() => {
@@ -398,10 +398,26 @@ export default function HomePage() {
                       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">
diff --git a/components/PricingSection.tsx b/components/PricingSection.tsx
index 37f5c40..2624e72 100644
--- a/components/PricingSection.tsx
+++ b/components/PricingSection.tsx
@@ -376,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">
               {[
diff --git a/components/settings/OrganizationSettings.tsx b/components/settings/OrganizationSettings.tsx
index fea995c..0febe51 100644
--- a/components/settings/OrganizationSettings.tsx
+++ b/components/settings/OrganizationSettings.tsx
@@ -312,6 +312,7 @@ export default function OrganizationSettings() {
     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])
@@ -1083,9 +1084,14 @@ export default function OrganizationSettings() {
                                   )}
                                   {invoice.hosted_invoice_url && (
                                     <a href={invoice.hosted_invoice_url} target="_blank" rel="noopener noreferrer"
-                                       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="View invoice">
+                                       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" />
-                                      View invoice
+                                      {invoice.status === 'open' ? 'Pay now' : 'View invoice'}
                                     </a>
                                   )}
                                 </div>