diff --git a/src/components/AITutor/AITutorLimits.tsx b/src/components/AITutor/AITutorLimits.tsx index 3cc93730e..6d060be12 100644 --- a/src/components/AITutor/AITutorLimits.tsx +++ b/src/components/AITutor/AITutorLimits.tsx @@ -12,7 +12,7 @@ type AITutorLimitsProps = { export function AITutorLimits(props: AITutorLimitsProps) { const limitUsedPercentage = Math.round((props.used / props.limit) * 100); - if (props.used <= 0 || props.limit <= 0 || props.isPaidUserLoading) { + if (props.limit <= 0 || props.isPaidUserLoading) { return null; } @@ -29,9 +29,7 @@ export function AITutorLimits(props: AITutorLimitsProps) { {limitUsedPercentage}% of daily limit used{' '} - - {limitUsedPercentage}% used - + {limitUsedPercentage}% used ); -} \ No newline at end of file +} diff --git a/src/components/GenerateCourse/AICourse.tsx b/src/components/GenerateCourse/AICourse.tsx index e6916d43e..9b93f345d 100644 --- a/src/components/GenerateCourse/AICourse.tsx +++ b/src/components/GenerateCourse/AICourse.tsx @@ -11,6 +11,8 @@ import { storeFineTuneData, } from '../../lib/ai'; import { cn } from '../../lib/classname'; +import { useIsPaidUser } from '../../queries/billing'; +import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; export const difficultyLevels = [ 'beginner', @@ -29,6 +31,9 @@ export function AICourse(props: AICourseProps) { const [about, setAbout] = useState(''); const [goal, setGoal] = useState(''); const [customInstructions, setCustomInstructions] = useState(''); + const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false); + + const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser(); useEffect(() => { const lastSessionId = getLastSessionId(); @@ -73,13 +78,28 @@ export function AICourse(props: AICourseProps) { return ( - - What can I help you learn? - - - Enter a topic below to generate a personalized course for it - - + + {isUpgradeModalOpen && ( + setIsUpgradeModalOpen(false)} /> + )} + {!isPaidUser && isLoggedIn() && ( + + You are on the free plan + setIsUpgradeModalOpen(true)} + className="ml-2 rounded-lg bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80" + > + Upgrade to Pro + + + )} + + What can I help you learn? + + + Enter a topic below to generate a personalized course for it + + - - - - - 💡 Pro tip: Use - Use specific topics like "JavaScript Promises" or "Go Routines" - instead of "JavaScript" or "Go" for better results - - - ); }
- Enter a topic below to generate a personalized course for it -
+ Enter a topic below to generate a personalized course for it +
- 💡 Pro tip: Use - Use specific topics like "JavaScript Promises" or "Go Routines" - instead of "JavaScript" or "Go" for better results -