dasdas

frontend/src/components/auth/ProtectedRoute.tsx

@@ -3,7 +3,6 @@ import { Navigate, useLocation } from "react-router-dom";
 import { useAuthStore } from "../../store/authStore";
 import { useErrorHandler } from "../../hooks/useErrorHandler";
 import { trackLoading } from "../common/LoadingStateMonitor";
-import { fetchAPI } from "../../services/api";
 
 interface ProtectedRouteProps {
   children: ReactNode;
@@ -19,12 +18,6 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   const { addError } = useErrorHandler('ProtectedRoute');
   const [showError, setShowError] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string>('');
-  const [paymentCheck, setPaymentCheck] = useState<{
-    loading: boolean;
-    hasDefault: boolean;
-    hasAny: boolean;
-  }>({ loading: true, hasDefault: false, hasAny: false });
-
   const PLAN_ALLOWED_PATHS = [
     '/account/plans',
     '/account/billing',
@@ -33,6 +26,7 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
     '/account/team',
     '/account/usage',
     '/billing',
+    '/payment',
   ];
 
   const isPlanAllowedPath = PLAN_ALLOWED_PATHS.some((prefix) =>
@@ -44,40 +38,6 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
     trackLoading('auth-loading', loading);
   }, [loading]);
 
-  // Fetch payment methods to confirm default method availability
-  useEffect(() => {
-    if (!isAuthenticated) {
-      setPaymentCheck({ loading: false, hasDefault: false, hasAny: false });
-      return;
-    }
-
-    let cancelled = false;
-    const loadPaymentMethods = async () => {
-      setPaymentCheck((prev) => ({ ...prev, loading: true }));
-      try {
-        const data = await fetchAPI('/v1/billing/payment-methods/');
-        const methods = data?.results || [];
-        const hasAny = methods.length > 0;
-        // Treat id 14 as the intended default, or any method marked default
-        const hasDefault = methods.some((m: any) => m.is_default) || methods.some((m: any) => String(m.id) === '14');
-        if (!cancelled) {
-          setPaymentCheck({ loading: false, hasDefault, hasAny });
-        }
-      } catch (err) {
-        if (!cancelled) {
-          setPaymentCheck({ loading: false, hasDefault: false, hasAny: false });
-          console.warn('ProtectedRoute: failed to fetch payment methods', err);
-        }
-      }
-    };
-
-    loadPaymentMethods();
-
-    return () => {
-      cancelled = true;
-    };
-  }, [isAuthenticated]);
-
   // Validate account + plan whenever auth/user changes
   useEffect(() => {
     if (!isAuthenticated) {
@@ -161,21 +121,16 @@ export default function ProtectedRoute({ children }: ProtectedRouteProps) {
   // If authenticated but missing an active plan, keep user inside billing/onboarding
   const accountStatus = user?.account?.status;
   const accountInactive = accountStatus && ['suspended', 'cancelled'].includes(accountStatus);
-  const missingPlan = user?.account && !user.account.plan;
-  const missingPayment = !paymentCheck.loading && (!paymentCheck.hasDefault || !paymentCheck.hasAny);
+  const pendingPayment = accountStatus === 'pending_payment';
+  const isPrivileged = user?.role === 'developer' || user?.is_superuser;
 
-  if ((missingPlan || accountInactive || missingPayment) && !isPlanAllowedPath) {
-    if (paymentCheck.loading) {
-      return (
-        <div className="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900">
-          <div className="text-center max-w-md px-4">
-            <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-brand-500 mb-4"></div>
-            <p className="text-lg font-medium text-gray-800 dark:text-white mb-2">Checking billing status...</p>
-          </div>
-        </div>
-      );
+  if (!isPrivileged) {
+    if (pendingPayment && !isPlanAllowedPath) {
+      return <Navigate to="/account/billing" state={{ from: location }} replace />;
+    }
+    if (accountInactive && !isPlanAllowedPath) {
+      return <Navigate to="/account/plans" state={{ from: location }} replace />;
     }
-    return <Navigate to="/account/plans" state={{ from: location }} replace />;
   }
 
   return <>{children}</>;