wip

src/components/AIQuiz/AIQuiz.tsx

@@ -1,18 +1,15 @@
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
-import { flushSync } from 'react-dom';
-import { useToast } from '../../hooks/use-toast';
 import { queryClient } from '../../stores/query-client';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 import { AlertCircleIcon } from 'lucide-react';
-import { isLoggedIn } from '../../lib/jwt';
-import { showLoginPopup } from '../../lib/popup';
 import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { billingDetailsOptions } from '../../queries/billing';
 import { AIQuizLayout } from './AIQuizLayout';
 import { GenerateAIQuiz } from './GenerateAIQuiz';
 import { aiQuizOptions, generateAIQuiz } from '../../queries/ai-quiz';
 import { AIQuizContent } from './AIQuizContent';
+import { LoadingChip } from '../LoadingChip';
 
 type AIQuizProps = {
   quizSlug?: string;
@@ -54,18 +51,24 @@ export function AIQuiz(props: AIQuizProps) {
         <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
       )}
 
-      {!isLoading && aiQuizError && (
-        <div className="absolute inset-0 z-10 flex h-full flex-col items-center justify-center bg-white">
-          <div className="flex flex-col items-center justify-center gap-2">
-            <AlertCircleIcon className="size-10 text-gray-500" />
-            <p className="text-center">
-              {aiQuizError?.message || 'Something went wrong'}
-            </p>
+      <div className="relative grow">
+        {isLoading && (
+          <div className="absolute inset-0 z-20 flex h-full flex-col items-center justify-center bg-white">
+            <LoadingChip message="Loading Quiz" />
           </div>
-        </div>
-      )}
+        )}
+
+        {!isLoading && aiQuizError && (
+          <div className="absolute inset-0 z-20 flex h-full flex-col items-center justify-center bg-white">
+            <div className="flex flex-col items-center justify-center gap-2">
+              <AlertCircleIcon className="size-10 text-gray-500" />
+              <p className="text-center">
+                {aiQuizError?.message || 'Something went wrong'}
+              </p>
+            </div>
+          </div>
+        )}
 
-      <div className="grow">
         {quizSlug && !aiQuizError && (
           <AIQuizContent
             quizSlug={quizSlug}

src/components/AIQuiz/AIQuizGenerator.tsx

@@ -12,7 +12,7 @@ import { useEffect, useId, useState } from 'react';
 import { isLoggedIn } from '../../lib/jwt';
 import { showLoginPopup } from '../../lib/popup';
 import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
-import { useIsPaidUser } from '../../queries/billing';
+import { billingDetailsOptions, useIsPaidUser } from '../../queries/billing';
 import {
   clearQuestionAnswerChatMessages,
   storeQuestionAnswerChatMessages,
@@ -27,24 +27,37 @@ import { getUrlParams } from '../../lib/browser';
 import { useParams } from '../../hooks/use-params';
 import { FormatItem } from '../ContentGenerator/FormatItem';
 import { AIQuizLayout } from './AIQuizLayout';
+import { queryClient } from '../../stores/query-client';
+import { useQuery } from '@tanstack/react-query';
+import { getAiCourseLimitOptions } from '../../queries/ai-course';
 
 const allowedFormats = ['mcq', 'open-ended', 'mixed'] as const;
 export type AllowedFormat = (typeof allowedFormats)[number];
 
 export function AIQuizGenerator() {
   const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false);
-  const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser();
 
   const toast = useToast();
   const [title, setTitle] = useState('');
   const [selectedFormat, setSelectedFormat] = useState<AllowedFormat>('mcq');
 
-  // question answer chat options
   const [showFineTuneOptions, setShowFineTuneOptions] = useState(false);
   const [questionAnswerChatMessages, setQuestionAnswerChatMessages] = useState<
     QuestionAnswerChatMessage[]
   >([]);
 
+  const {
+    data: tokenUsage,
+    isLoading: isTokenUsageLoading,
+    refetch: refetchTokenUsage,
+  } = useQuery(getAiCourseLimitOptions(), queryClient);
+
+  const { data: userBillingDetails, isLoading: isBillingDetailsLoading } =
+    useQuery(billingDetailsOptions(), queryClient);
+
+  const isLimitExceeded = (tokenUsage?.used || 0) >= (tokenUsage?.limit || 0);
+  const isPaidUser = userBillingDetails?.status === 'active';
+
   const titleFieldId = useId();
   const fineTuneOptionsId = useId();
 
@@ -88,6 +101,11 @@ export function AIQuizGenerator() {
       return;
     }
 
+    if (!isPaidUser && isLimitExceeded) {
+      setIsUpgradeModalOpen(true);
+      return;
+    }
+
     let sessionId = '';
     if (showFineTuneOptions) {
       clearQuestionAnswerChatMessages();
@@ -117,7 +135,8 @@ export function AIQuizGenerator() {
         {isUpgradeModalOpen && (
           <UpgradeAccountModal onClose={() => setIsUpgradeModalOpen(false)} />
         )}
-        {!isPaidUser && !isPaidUserLoading && isLoggedIn() && (
+
+        {!isPaidUser && !isBillingDetailsLoading && isLoggedIn() && (
           <div className="absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-8 text-gray-500 max-md:hidden">
             You are on the free plan
             <button
@@ -193,6 +212,16 @@ export function AIQuizGenerator() {
             id={fineTuneOptionsId}
             checked={showFineTuneOptions}
             onChange={(e) => {
+              if (!isLoggedIn()) {
+                showLoginPopup();
+                return;
+              }
+
+              if (!isPaidUser && isLimitExceeded) {
+                setIsUpgradeModalOpen(true);
+                return;
+              }
+
               if (!trimmedTitle) {
                 toast.error('Please enter a topic first');
                 return;

src/components/AIQuiz/GenerateAIQuiz.tsx

@@ -11,6 +11,7 @@ import {
 } from '../../queries/ai-quiz';
 import { queryClient } from '../../stores/query-client';
 import { AIQuizContent } from './AIQuizContent';
+import { AlertCircleIcon } from 'lucide-react';
 
 type GenerateAIQuizProps = {
   onQuizSlugChange?: (quizSlug: string) => void;
@@ -102,7 +103,14 @@ export function GenerateAIQuiz(props: GenerateAIQuizProps) {
   };
 
   if (error) {
-    return <div className="text-red-500">{error}</div>;
+    return (
+      <div className="absolute inset-0 z-20 flex h-full flex-col items-center justify-center bg-white">
+        <div className="flex flex-col items-center justify-center gap-2">
+          <AlertCircleIcon className="size-10 text-gray-500" />
+          <p className="text-center">{error}</p>
+        </div>
+      </div>
+    );
   }
 
   if (isLoading) {
@@ -113,5 +121,5 @@ export function GenerateAIQuiz(props: GenerateAIQuizProps) {
     );
   }
 
-  return <AIQuizContent  questions={questions} />;
+  return <AIQuizContent questions={questions} />;
 }