From 69d9dd23b2b05f35475916006b59db78001afa53 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Thu, 17 Apr 2025 10:55:46 +0100
Subject: [PATCH] Add upgrade button on ai page
---
src/components/AITutor/AITutorLimits.tsx | 8 ++--
src/components/GenerateCourse/AICourse.tsx | 44 +++++++++++++---------
2 files changed, 30 insertions(+), 22 deletions(-)
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) {
<span className="max-md:hidden">
{limitUsedPercentage}% of daily limit used{' '}
</span>
- <span className="inline md:hidden">
- {limitUsedPercentage}% used
- </span>
+ <span className="inline md:hidden">{limitUsedPercentage}% used</span>
<button
onClick={props.onUpgradeClick}
className="ml-1.5 flex items-center gap-1 rounded-full bg-yellow-600 py-0.5 pr-2 pl-1.5 text-xs text-white"
@@ -42,4 +40,4 @@ export function AITutorLimits(props: AITutorLimitsProps) {
</p>
</div>
);
-}
\ 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 (
<div className="mx-auto flex w-full max-w-3xl flex-grow flex-col pt-4 md:justify-center md:pt-10 lg:pt-0">
- <h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
- What can I help you learn?
- </h1>
- <p className="mb-3 text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm lg:mb-6">
- Enter a topic below to generate a personalized course for it
- </p>
-
+ <div className="relative">
+ {isUpgradeModalOpen && (
+ <UpgradeAccountModal onClose={() => setIsUpgradeModalOpen(false)} />
+ )}
+ {!isPaidUser && isLoggedIn() && (
+ <div className="absolute bottom-full left-1/2 -translate-x-1/2 -translate-y-8 text-gray-500">
+ You are on the free plan
+ <button
+ onClick={() => setIsUpgradeModalOpen(true)}
+ className="ml-2 rounded-lg bg-yellow-600 px-2 py-1 text-sm text-white hover:opacity-80"
+ >
+ Upgrade to Pro
+ </button>
+ </div>
+ )}
+ <h1 className="mb-0.5 text-center text-4xl font-semibold max-md:text-left max-md:text-xl lg:mb-3">
+ What can I help you learn?
+ </h1>
+ <p className="mb-3 text-center text-lg text-balance text-gray-600 max-md:text-left max-md:text-sm md:mb-6">
+ Enter a topic below to generate a personalized course for it
+ </p>
+ </div>
<div className="rounded-lg border border-gray-300 bg-white">
<form
className="flex flex-col"
@@ -165,16 +185,6 @@ export function AICourse(props: AICourseProps) {
</button>
</form>
</div>
-
- <div className="mx-auto mt-4 max-w-xl rounded-lg border border-yellow-100 bg-yellow-50 px-5 py-4">
- <div className="flex items-center gap-3">
- <p className="text-sm leading-6 text-gray-700">
- <span className="font-semibold text-gray-900">💡 Pro tip:</span> Use
- Use specific topics like "JavaScript Promises" or "Go Routines"
- instead of "JavaScript" or "Go" for better results
- </p>
- </div>
- </div>
</div>
);
}