From ad207dc23ff8d706bd645a045a6e3e6ae378ba08 Mon Sep 17 00:00:00 2001
From: Usman Baig <mubaig@pm.me>
Date: Fri, 27 Mar 2026 11:48:00 +0100
Subject: [PATCH] fix: move useState before conditional returns, fix yearly
 total display

---
 app/checkout/page.tsx               | 4 ++--
 components/checkout/PlanSummary.tsx | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/checkout/page.tsx b/app/checkout/page.tsx
index 250653b..55fcb35 100644
--- a/app/checkout/page.tsx
+++ b/app/checkout/page.tsx
@@ -123,6 +123,8 @@ function CheckoutContent() {
   const searchParams = useSearchParams()
   const { user, loading: authLoading } = useAuth()
   const { data: subscription } = useSubscription()
+  const [country, setCountry] = useState('')
+  const [vatId, setVatId] = useState('')
 
   const status = searchParams.get('status')
   const plan = searchParams.get('plan')
@@ -170,8 +172,6 @@ function CheckoutContent() {
   const planId = plan!
   const billingInterval = interval as 'month' | 'year'
   const pageviewLimit = Number(limit)
-  const [country, setCountry] = useState('')
-  const [vatId, setVatId] = useState('')
 
   return (
     <div className="flex h-screen overflow-hidden">
diff --git a/components/checkout/PlanSummary.tsx b/components/checkout/PlanSummary.tsx
index a28541b..59163cc 100644
--- a/components/checkout/PlanSummary.tsx
+++ b/components/checkout/PlanSummary.tsx
@@ -158,11 +158,11 @@ export default function PlanSummary({ plan, interval, limit, country, vatId, onC
               </div>
             )}
             <div className="flex justify-between font-semibold text-white pt-1 border-t border-neutral-800">
-              <span>Total /mo</span>
+              <span>Total {isYearly ? '/year' : '/mo'}</span>
               <span>&euro;{vatResult.total_amount}</span>
             </div>
             {isYearly && (
-              <p className="text-xs text-neutral-500">Billed as &euro;{(parseFloat(vatResult.total_amount) * 12).toFixed(2)}/year</p>
+              <p className="text-xs text-neutral-500">&euro;{(parseFloat(vatResult.total_amount) / 12).toFixed(2)}/mo</p>
             )}
           </div>
         ) : null}