wip

src/components/Billing/UpgradeAccountModal.tsx

@@ -24,9 +24,13 @@ type CreateSubscriptionCheckoutSessionResponse = {
   checkoutUrl: string;
 };
 
-type UpgradeAccountModalProps = {};
+type UpgradeAccountModalProps = {
+  onClose: () => void;
+};
 
 export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
+  const { onClose } = props;
+
   const [selectedPlan, setSelectedPlan] =
     useState<AllowedSubscriptionInterval>('month');
   const [isUpdatingPlan, setIsUpdatingPlan] = useState(false);
@@ -115,7 +119,7 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) {
 
   return (
     <Modal
-      onClose={() => {}}
+      onClose={onClose}
       wrapperClassName="rounded-xl max-w-3xl w-full min-h-[540px]"
       bodyClassName="p-6"
     >

src/components/GenerateCourse/AICourseLimit.tsx

@@ -11,10 +11,12 @@ import { useState, useRef } from 'react';
 import { getAiCourseLimitOptions } from '../../queries/ai-course';
 import { queryClient } from '../../stores/query-client';
 import { useOutsideClick } from '../../hooks/use-outside-click';
+import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal';
 
 export function AICourseLimit() {
   const containerRef = useRef<HTMLDivElement>(null);
   const [isOpen, setIsOpen] = useState(false);
+  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
 
   const { data: limits, isLoading } = useQuery(
     getAiCourseLimitOptions(),
@@ -45,6 +47,7 @@ export function AICourseLimit() {
   const followUpPercentage = Math.round((followUpUsed / followUpLimit) * 100);
 
   return (
+    <>
       <div className="relative z-10" ref={containerRef}>
         <button
           className="flex h-full cursor-pointer items-center rounded-lg border border-gray-200 px-2 py-1.5 text-sm hover:bg-gray-50"
@@ -120,5 +123,17 @@ export function AICourseLimit() {
           </div>
         )}
       </div>
+
+      <button
+        className="ml-2 rounded-md border border-gray-200 px-2 py-1 text-sm hover:bg-gray-50"
+        onClick={() => setShowUpgradeModal(true)}
+      >
+        Upgrade
+      </button>
+
+      {showUpgradeModal && (
+        <UpgradeAccountModal onClose={() => setShowUpgradeModal(false)} />
+      )}
+    </>
   );
 }

src/components/GenerateCourse/GetAICourse.tsx

@@ -45,8 +45,6 @@ export function GetAICourse(props: GetAICourseProps) {
   }, [error]);
 
   return (
-    <>
-      <UpgradeAccountModal />
     <AICourseContent
       course={{
         title: aiCourse?.title || '',
@@ -57,6 +55,5 @@ export function GetAICourse(props: GetAICourseProps) {
       courseSlug={courseSlug}
       error={error?.message}
     />
-    </>
   );
 }