diff --git a/src/components/AITutor/AITutorSidebar.tsx b/src/components/AITutor/AITutorSidebar.tsx index 5ee4fccc2..471d75849 100644 --- a/src/components/AITutor/AITutorSidebar.tsx +++ b/src/components/AITutor/AITutorSidebar.tsx @@ -1,5 +1,9 @@ -import { BookOpen, Compass, Plus, Star, X } from 'lucide-react'; +import { useEffect, useState } from 'react'; +import { BookOpen, Compass, Plus, Star, X, Zap } from 'lucide-react'; import { AITutorLogo } from '../ReactIcons/AITutorLogo'; +import { UpgradeAccountModal } from '../Billing/UpgradeAccountModal'; +import { useIsPaidUser } from '../../queries/billing'; +import { isLoggedIn } from '../../lib/jwt'; type AITutorSidebarProps = { isFloating: boolean; @@ -39,8 +43,21 @@ export type AITutorTab = (typeof sidebarItems)[number]['key']; export function AITutorSidebar(props: AITutorSidebarProps) { const { activeTab, isFloating, onClose } = props; + const [isInitialLoad, setIsInitialLoad] = useState(true); + + const [isUpgradeModalOpen, setIsUpgradeModalOpen] = useState(false); + const { isPaidUser, isLoading: isPaidUserLoading } = useIsPaidUser(); + + useEffect(() => { + setIsInitialLoad(false); + }, []); + return ( <> + {isUpgradeModalOpen && ( + setIsUpgradeModalOpen(false)} /> + )} + {isFloating && ( diff --git a/src/components/AITutor/AITutorSidebarProps.tsx b/src/components/AITutor/AITutorSidebarProps.tsx new file mode 100644 index 000000000..8ede3e1a4 --- /dev/null +++ b/src/components/AITutor/AITutorSidebarProps.tsx @@ -0,0 +1,13 @@ +import { Zap } from 'lucide-react'; + +
  • +
    +
    + + Free Tier +
    +

    + Upgrade to Pro to unlock unlimited AI tutoring sessions +

    +
    +
  • \ No newline at end of file diff --git a/src/components/Billing/UpgradeAccountModal.tsx b/src/components/Billing/UpgradeAccountModal.tsx index 452fd2665..359c4acab 100644 --- a/src/components/Billing/UpgradeAccountModal.tsx +++ b/src/components/Billing/UpgradeAccountModal.tsx @@ -234,7 +234,14 @@ export function UpgradeAccountModal(props: UpgradeAccountModalProps) { )}

    )} -

    +

    ${plan.amount}{' '} / {isYearly ? 'year' : 'month'}