fix: pro user instant verification

apps/web/src/components/payment/PaymentFlow.tsx

@@ -50,6 +50,7 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
     amount: number; // Stored for display purposes only
   } | null>(null);
 
+  const utils = trpc.useUtils();
   const createOrderMutation = (trpc.payment as any).createOrder.useMutation();
   const verifyPaymentMutation = (
     trpc.payment as any
@@ -71,7 +72,18 @@ const PaymentFlow: React.FC<PaymentFlowProps> = ({
           planId: planId,
         });
 
-        // Show success and redirect
+        // invalidate cache and fetch fresh subscription status before redirect
+        // this ensures the checkout page shows the updated status immediately
+        // wrap in Promise.race with timeout to prevent hanging
+        await (utils.user as any).subscriptionStatus.invalidate();
+        await Promise.race([
+          (utils.user as any).subscriptionStatus.fetch(undefined, {
+            throwOnError: false,
+          }),
+          new Promise((resolve) => setTimeout(resolve, 3000)), // 3s timeout
+        ]);
+
+        // redirect after subscription status is fetched and cached
         router.push("/checkout");
       } catch (error) {
         console.error("Verification failed:", error);

apps/web/src/hooks/useSubscription.ts

@@ -19,18 +19,21 @@ export function useSubscription() {
     isLoading,
   } = useSubscriptionStore();
 
+  const utils = trpc.useUtils();
+
   // Fetch subscription status using tRPC
   const {
     data,
     isLoading: isFetching,
     isError,
     isFetched,
+    refetch,
   } = (trpc.user as any).subscriptionStatus.useQuery(undefined, {
     enabled: !!session?.user && status === "authenticated",
-    refetchOnWindowFocus: false,
+    refetchOnWindowFocus: true, // refetch when user returns to tab
     refetchOnMount: true,
-    staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
-    gcTime: 10 * 60 * 1000, // Keep in cache for 10 minutes
+    staleTime: 2 * 60 * 1000, // consider data fresh for 2 minutes (reduced from 5)
+    gcTime: 10 * 60 * 1000, // keep in cache for 10 minutes
   });
 
   useEffect(() => {
@@ -69,9 +72,16 @@ export function useSubscription() {
     reset,
   ]);
 
+  // manual refetch function for immediate cache invalidation
+  const refetchSubscription = async () => {
+    await (utils.user as any).subscriptionStatus.invalidate();
+    await refetch();
+  };
+
   return {
     isPaidUser,
     subscription,
     isLoading,
+    refetchSubscription, // expose manual refetch function
   };
 }