From e876b10f4d0f4240189b39504e5a0e7b28eedd96 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Sat, 8 Mar 2025 16:57:16 +0000
Subject: [PATCH] Add course upgrade button

---
 .../GenerateCourse/AICourseFollowUp.tsx       | 20 +++++++++++--
 .../AICourseFollowUpPopover.tsx               | 29 ++++++++++---------
 .../GenerateCourse/AICourseLimit.tsx          |  2 +-
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/components/GenerateCourse/AICourseFollowUp.tsx b/src/components/GenerateCourse/AICourseFollowUp.tsx
index 98e92c7c6..9241ccdb2 100644
--- a/src/components/GenerateCourse/AICourseFollowUp.tsx
+++ b/src/components/GenerateCourse/AICourseFollowUp.tsx
@@ -4,6 +4,7 @@ import {
   AICourseFollowUpPopover,
   type AIChatHistoryType,
 } from './AICourseFollowUpPopover';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 
 type AICourseFollowUpProps = {
   courseSlug: string;
@@ -15,6 +16,8 @@ export function AICourseFollowUp(props: AICourseFollowUpProps) {
   const { courseSlug, moduleTitle, lessonTitle } = props;
 
   const [isOpen, setIsOpen] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
+
   const [courseAIChatHistory, setCourseAIChatHistory] = useState<
     AIChatHistoryType[]
   >([
@@ -29,15 +32,22 @@ export function AICourseFollowUp(props: AICourseFollowUpProps) {
   return (
     <div className="relative">
       <button
-        className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-4 hover:bg-yellow-200"
+        className="mt-4 flex w-full items-center gap-2 rounded-lg border border-yellow-300 bg-yellow-100 p-4 hover:bg-yellow-200 max-lg:mt-3 max-lg:text-sm"
         onClick={() => setIsOpen(true)}
       >
         <BotIcon className="h-4 w-4" />
-        <span>Still confused? Ask AI some follow up questions.</span>
+        <span>
+          <span className="max-sm:hidden">Still confused?&nbsp;</span>
+          Ask AI some follow up questions
+        </span>
 
-        <ArrowRightIcon className="ml-auto h-4 w-4" />
+        <ArrowRightIcon className="ml-auto h-4 w-4 max-sm:hidden" />
       </button>
 
+      {showUpgradeModal && (
+        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
+      )}
+
       {isOpen && (
         <AICourseFollowUpPopover
           courseSlug={courseSlug}
@@ -45,6 +55,10 @@ export function AICourseFollowUp(props: AICourseFollowUpProps) {
           lessonTitle={lessonTitle}
           courseAIChatHistory={courseAIChatHistory}
           setCourseAIChatHistory={setCourseAIChatHistory}
+          onUpgradeClick={() => {
+            setIsOpen(false);
+            setShowUpgradeModal(true);
+          }}
           onOutsideClick={() => {
             if (!isOpen) {
               return;
diff --git a/src/components/GenerateCourse/AICourseFollowUpPopover.tsx b/src/components/GenerateCourse/AICourseFollowUpPopover.tsx
index cd2ef2df5..d1e84976f 100644
--- a/src/components/GenerateCourse/AICourseFollowUpPopover.tsx
+++ b/src/components/GenerateCourse/AICourseFollowUpPopover.tsx
@@ -1,14 +1,5 @@
 import { useQuery } from '@tanstack/react-query';
-import {
-  BookOpen,
-  Bot,
-  Code,
-  GitCompare,
-  HelpCircle,
-  LockIcon,
-  MessageCircle,
-  Send,
-} from 'lucide-react';
+import { BookOpen, Bot, Code, HelpCircle, LockIcon, Send } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState, type FormEvent } from 'react';
 import { flushSync } from 'react-dom';
 import { useOutsideClick } from '../../hooks/use-outside-click';
@@ -41,6 +32,7 @@ type AICourseFollowUpPopoverProps = {
   setCourseAIChatHistory: (value: AIChatHistoryType[]) => void;
 
   onOutsideClick?: () => void;
+  onUpgradeClick: () => void;
 };
 
 export function AICourseFollowUpPopover(props: AICourseFollowUpPopoverProps) {
@@ -49,6 +41,7 @@ export function AICourseFollowUpPopover(props: AICourseFollowUpPopoverProps) {
     moduleTitle,
     lessonTitle,
     onOutsideClick,
+    onUpgradeClick,
 
     courseAIChatHistory,
     setCourseAIChatHistory,
@@ -205,7 +198,7 @@ export function AICourseFollowUpPopover(props: AICourseFollowUpPopoverProps) {
                 return (
                   <>
                     <AIChatCard
-                      key={index}
+                      key={`chat-${index}`}
                       role={chat.role}
                       content={chat.content}
                       html={chat.html}
@@ -244,9 +237,17 @@ export function AICourseFollowUpPopover(props: AICourseFollowUpPopoverProps) {
         onSubmit={handleChatSubmit}
       >
         {isLimitExceeded && (
-          <div className="absolute inset-0 flex items-center justify-center bg-black text-white">
-            <LockIcon className="size-4" strokeWidth={2.5} />
-            <p>You have reached the AI usage limit for today.</p>
+          <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black text-white">
+            <LockIcon className="size-4 cursor-not-allowed" strokeWidth={2.5} />
+            <p className="cursor-not-allowed">Limit reached for today</p>
+            <button
+              onClick={() => {
+                onUpgradeClick();
+              }}
+              className="rounded-md bg-white px-2 py-1 text-xs font-medium text-black hover:bg-gray-300"
+            >
+              Upgrade for more
+            </button>
           </div>
         )}
         <TextareaAutosize
diff --git a/src/components/GenerateCourse/AICourseLimit.tsx b/src/components/GenerateCourse/AICourseLimit.tsx
index a5e61d67d..e85f0d2ae 100644
--- a/src/components/GenerateCourse/AICourseLimit.tsx
+++ b/src/components/GenerateCourse/AICourseLimit.tsx
@@ -32,7 +32,7 @@ export function AICourseLimit() {
     <>
       <button className="mr-1 flex items-center gap-1 text-sm font-medium lg:hidden underline underline-offset-2">
         <Info className="size-4" />
-        {totalPercentage}% of limit used
+        {totalPercentage}% limit used
       </button>
 
       <button className="relative hidden h-full min-h-[38px] cursor-pointer items-center overflow-hidden rounded-lg border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50 lg:flex">