Align dashboard access and dedupe subscription state reads

Author: olyaiy

src/app/(dashboard)/home/page.tsx

@@ -102,7 +102,7 @@ export default async function Home({
 
   // Check if user has Pro access (paid, canceling-but-active, or trialing)
   const isProPlan = subscription.hasProAccess;
-  const needsTrial = subscription.status !== 'active' && subscription.status !== 'canceled';
+  const shouldGateResumeActions = false;
 
   // console.log(subscription);
 
@@ -132,7 +132,7 @@ export default async function Home({
   }
 
   return (
-    <TrialGateProvider enabled={needsTrial}>
+    <TrialGateProvider enabled={shouldGateResumeActions}>
     <main className="min-h-screen relative sm:pb-12 pb-40">
 
       {/* Welcome Dialog for New Signups */}
@@ -156,7 +156,7 @@ export default async function Home({
           {/* Profile Overview */}
           <div className="mb-6 space-y-4">
             {/* API Key Alert */}
-            {!isProPlan && <ApiKeyAlert variant={needsTrial ? 'trial' : 'upgrade'} />}
+            {!isProPlan && <ApiKeyAlert variant="upgrade" />}
 
             {/* Greeting & Edit Button */}
             <div className="flex items-center justify-between">

src/app/(dashboard)/settings/page.tsx

@@ -3,28 +3,36 @@
 "use server"
 
 import { SettingsContent } from '@/components/settings/settings-content'
-import { checkSubscriptionPlan } from '@/utils/actions/stripe/actions';
 import { createClient } from '@/utils/supabase/server'
+import { getSubscriptionAccessState } from '@/lib/subscription-access';
 
 
 export default async function SettingsPage() {
   const supabase = await createClient();
   const { data: { user } } = await supabase.auth.getUser();
 
+  const { data: subscription } = user
+    ? await supabase
+        .from('subscriptions')
+        .select('subscription_plan, subscription_status, current_period_end, trial_end, stripe_subscription_id')
+        .eq('user_id', user.id)
+        .maybeSingle()
+    : { data: null };
 
-    // Check if user is on Pro plan
-    const subscription = await checkSubscriptionPlan();
-    const isProPlan = subscription.plan === 'pro';
+  const subscriptionState = getSubscriptionAccessState(subscription);
+  const isProPlan = subscriptionState.hasProAccess;
+  const subscriptionStatus = subscription?.subscription_status ?? '';
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-50 via-white to-gray-50">
       <main className="pt-4 pb-16 px-4 md:px-8 max-w-7xl mx-auto">
         <SettingsContent 
           user={user} 
           isProPlan={isProPlan}
-          subscriptionStatus={subscription.status}
+          subscriptionStatus={subscriptionStatus}
+          subscriptionSnapshot={subscription}
         />
       </main>
     </div>
   )
-}
+}

src/components/settings/settings-content.tsx

@@ -9,6 +9,7 @@ import { User } from "@supabase/supabase-js"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
 import { useEffect, useState } from "react"
+import type { SubscriptionSnapshot } from "@/lib/subscription-access"
 
 const sections = [
   { id: "security", title: "Security", description: "Manage your email and password settings", icon: "🔒" },
@@ -22,9 +23,10 @@ interface SettingsContentProps {
   user: User | null;
   isProPlan: boolean;
   subscriptionStatus: string;
+  subscriptionSnapshot: SubscriptionSnapshot | null;
 }
 
-export function SettingsContent({ user, isProPlan, subscriptionStatus }: SettingsContentProps) {
+export function SettingsContent({ user, isProPlan, subscriptionStatus, subscriptionSnapshot }: SettingsContentProps) {
   const [activeSection, setActiveSection] = useState<string>("security")
 
   useEffect(() => {
@@ -113,7 +115,7 @@ export function SettingsContent({ user, isProPlan, subscriptionStatus }: Setting
             <CardDescription>Manage your subscription and billing settings</CardDescription>
           </CardHeader>
           <CardContent>
-            <SubscriptionSection />
+            <SubscriptionSection initialProfile={subscriptionSnapshot} />
           </CardContent>
         </Card>
 
@@ -152,4 +154,4 @@ export function SettingsContent({ user, isProPlan, subscriptionStatus }: Setting
       </div>
     </div>
   )
-} 
+} 

src/components/settings/subscription-section.tsx

@@ -1,37 +1,23 @@
 'use client'
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { Button } from "@/components/ui/button"
 import { Badge } from "@/components/ui/badge"
 import { Sparkles, Star, Clock, Zap, ArrowRight, Crown, Shield, Check, Users, TrendingUp } from "lucide-react"
 import { cn } from '@/lib/utils';
 import { createPortalSession } from '@/app/(dashboard)/subscription/stripe-session';
-import { getSubscriptionStatus } from '@/utils/actions/stripe/actions';
 import { getSubscriptionAccessState, type SubscriptionSnapshot } from '@/lib/subscription-access';
 
-export function SubscriptionSection() {
+interface SubscriptionSectionProps {
+  initialProfile: SubscriptionSnapshot | null;
+}
+
+export function SubscriptionSection({ initialProfile }: SubscriptionSectionProps) {
   const [isLoading, setIsLoading] = useState(false);
-  const [profile, setProfile] = useState<SubscriptionSnapshot | null>(null);
-  const [isLoadingProfile, setIsLoadingProfile] = useState(true);
   const router = useRouter();
 
-  useEffect(() => {
-    async function fetchSubscriptionStatus() {
-      try {
-        const data = await getSubscriptionStatus();
-        setProfile(data);
-      } catch (error) {
-        console.error('Error fetching subscription status:', error);
-      } finally {
-        setIsLoadingProfile(false);
-      }
-    }
-
-    fetchSubscriptionStatus();
-  }, []);
-
-  const subscriptionAccessState = getSubscriptionAccessState(profile);
+  const subscriptionAccessState = getSubscriptionAccessState(initialProfile);
   const {
     hasProAccess,
     isCanceling,
@@ -68,20 +54,6 @@ export function SubscriptionSection() {
 
   const endDate = currentPeriodEndLabel;
 
-  if (isLoadingProfile) {
-    return (
-      <div className="space-y-6 relative min-h-[400px] flex items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <div className="h-16 w-16 bg-gradient-to-br from-blue-100 to-purple-100 rounded-2xl animate-pulse" />
-          <div className="space-y-2 text-center">
-            <div className="h-6 w-48 bg-gradient-to-r from-slate-200 to-slate-100 rounded-lg animate-pulse" />
-            <div className="h-4 w-64 bg-gradient-to-r from-slate-100 to-slate-200 rounded-lg animate-pulse" />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="space-y-8">
       {/* Background decoration */}

src/utils/supabase/middleware.ts

@@ -1,5 +1,6 @@
 import { createServerClient } from '@supabase/ssr'
 import { NextResponse, type NextRequest } from 'next/server'
+import { getSubscriptionAccessState } from '@/lib/subscription-access'
 
 // Routes available on the free plan (auth still required)
 const SUBSCRIPTION_EXEMPT_ROUTES = [
@@ -19,13 +20,6 @@ function isSubscriptionExemptRoute(pathname: string): boolean {
   return SUBSCRIPTION_EXEMPT_ROUTES.some(route => pathname.startsWith(route))
 }
 
-function isFutureDate(value: string | null | undefined): boolean {
-  if (!value) return false
-  const parsed = Date.parse(value)
-  if (Number.isNaN(parsed)) return false
-  return parsed > Date.now()
-}
-
 export async function updateSession(request: NextRequest) {
   // Debug logging
   console.log('🔍 updateSession running on:', request.nextUrl.pathname)
@@ -112,7 +106,7 @@ export async function updateSession(request: NextRequest) {
     console.log('🧭 Subscription check for path:', pathname)
     const { data: subscription } = await supabase
       .from('subscriptions')
-      .select('stripe_subscription_id, subscription_status, current_period_end, trial_end')
+      .select('subscription_plan, stripe_subscription_id, subscription_status, current_period_end, trial_end')
       .eq('user_id', user.id)
       .maybeSingle()
 
@@ -123,23 +117,13 @@ export async function updateSession(request: NextRequest) {
       trial_end: subscription?.trial_end,
     })
 
-    const status = subscription?.subscription_status
-    const isTrialing = isFutureDate(subscription?.trial_end)
-    const isWithinAccessWindow = isFutureDate(subscription?.current_period_end)
-
-    // Access rules for protected routes:
-    // - active subscriptions are allowed
-    // - canceled subscriptions are allowed only until current_period_end
-    // - active trials are always allowed
-    const hasProtectedRouteAccess =
-      status === 'active' ||
-      isTrialing ||
-      (status === 'canceled' && isWithinAccessWindow)
+    const subscriptionState = getSubscriptionAccessState(subscription)
+    const hasProtectedRouteAccess = subscriptionState.hasProAccess
 
     console.log('✅ accessCheck:', {
-      status,
-      isTrialing,
-      isWithinAccessWindow,
+      status: subscription?.subscription_status,
+      isTrialing: subscriptionState.isTrialing,
+      isWithinAccessWindow: subscriptionState.isWithinAccessWindow,
       hasProtectedRouteAccess,
     })