feat: add pro modal

Author: Deepcoders30

.env

@@ -17,4 +17,6 @@ REPLICATE_API_TOKEN=r8_3KjZq1tyartJ1tHb6BBeYggCaSra0uT0m0Vkm
 # Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
 # See the documentation for all the connection string options: https://pris.ly/d/connection-strings
 
-DATABASE_URL='mysql://saeggh34vyen48kcdwmv:pscale_pw_gnIxUV0vYW9L5qc902GUmEsKK5ubGXNWnXfLq0OmcMY@aws.connect.psdb.cloud/deep-ai?sslaccept=strict'
+DATABASE_URL='mysql://saeggh34vyen48kcdwmv:pscale_pw_gnIxUV0vYW9L5qc902GUmEsKK5ubGXNWnXfLq0OmcMY@aws.connect.psdb.cloud/deep-ai?sslaccept=strict'
+
+STRIPE_API_KEY=sk_test_51N4oJVSC93JRNtfEpJt7CkqPB24uzNJTKhhAbKucq1RbHwCmD1kQkhsgV0AooUwQk2I9U4VeIQOLsUbh5vkFT42d00EyPQ8pAn

app/(dashboard)/(routes)/code/page.tsx

@@ -19,8 +19,10 @@ import { cn } from "@/lib/utils";
 import UserAvatar from "@/components/user-avatar";
 import { BotAvatar } from "@/components/bot-avatar";
 import ReactMarkdown from "react-markdown";
+import { useProModal } from "@/hooks/use-pro-modal";
 
 const CodePage = () => {
+  const proModal = useProModal();
   const router = useRouter();
   const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
   const form = useForm<z.infer<typeof formSchema>>({
@@ -45,7 +47,9 @@ const CodePage = () => {
       setMessages((current) => [...current, userMessage, response.data]);
       form.reset();
     } catch (error: any) {
-      console.log(error);
+      if (error?.response?.status === 403) {
+        proModal.onOpen();
+      }
     } finally {
       router.refresh();
     }

app/(dashboard)/(routes)/conversation/page.tsx

@@ -18,8 +18,10 @@ import Loader from "@/components/loader";
 import { cn } from "@/lib/utils";
 import UserAvatar from "@/components/user-avatar";
 import { BotAvatar } from "@/components/bot-avatar";
+import { useProModal } from "@/hooks/use-pro-modal";
 
 const ConversationPage = () => {
+  const proModal = useProModal();
   const router = useRouter();
   const [messages, setMessages] = useState<ChatCompletionRequestMessage[]>([]);
   const form = useForm<z.infer<typeof formSchema>>({
@@ -44,7 +46,9 @@ const ConversationPage = () => {
       setMessages((current) => [...current, userMessage, response.data]);
       form.reset();
     } catch (error: any) {
-      console.log(error);
+      if (error?.response?.status === 403) {
+        proModal.onOpen();
+      }
     } finally {
       router.refresh();
     }

app/(dashboard)/(routes)/image/page.tsx

@@ -24,8 +24,10 @@ import {
 } from "@/components/ui/select";
 import { Card, CardFooter } from "@/components/ui/card";
 import Image from "next/image";
+import { useProModal } from "@/hooks/use-pro-modal";
 
-const ConversationPage = () => {
+const ImagePage = () => {
+  const proModal = useProModal();
   const router = useRouter();
   const [images, setImages] = useState<string[]>([]);
 
@@ -44,11 +46,13 @@ const ConversationPage = () => {
       setImages([]);
       const response = await axios.post("/api/image", values);
       const urls = response.data.map((image: { url: string }) => image.url);
-      
-      setImages(urls)
+
+      setImages(urls);
       form.reset();
     } catch (error: any) {
-      console.log(error);
+      if (error?.response?.status === 403) {
+        proModal.onOpen();
+      }
     } finally {
       router.refresh();
     }
@@ -185,4 +189,4 @@ const ConversationPage = () => {
   );
 };
 
-export default ConversationPage;
+export default ImagePage;

app/(dashboard)/(routes)/music/page.tsx

@@ -15,8 +15,10 @@ import { useRouter } from "next/navigation";
 import { ChatCompletionRequestMessage } from "openai";
 import { Empty } from "@/components/empty";
 import Loader from "@/components/loader";
+import { useProModal } from "@/hooks/use-pro-modal";
 
 const MusicPage = () => {
+  const proModal = useProModal();
   const router = useRouter();
   const [music, setMusic] = useState<string>();
   const form = useForm<z.infer<typeof formSchema>>({
@@ -36,7 +38,9 @@ const MusicPage = () => {
       setMusic(response.data.audio);
       form.reset();
     } catch (error: any) {
-      console.log(error);
+      if (error?.response?.status === 403) {
+        proModal.onOpen();
+      }
     } finally {
       router.refresh();
     }

app/(dashboard)/(routes)/video/page.tsx

@@ -14,8 +14,10 @@ import axios from "axios";
 import { useRouter } from "next/navigation";
 import { Empty } from "@/components/empty";
 import Loader from "@/components/loader";
+import { useProModal } from "@/hooks/use-pro-modal";
 
 const VideoPage = () => {
+  const proModal = useProModal();
   const router = useRouter();
   const [video, setVideo] = useState<string>();
   const form = useForm<z.infer<typeof formSchema>>({
@@ -35,7 +37,9 @@ const VideoPage = () => {
       setVideo(response.data[0]);
       form.reset();
     } catch (error: any) {
-      console.log(error);
+      if (error?.response?.status === 403) {
+        proModal.onOpen();
+      }
     } finally {
       router.refresh();
     }
@@ -90,7 +94,10 @@ const VideoPage = () => {
           {!video && !isLoading && <Empty label="No Video Generated" />}
 
           {video && (
-            <video controls className="w-full aspect-video rounded-lg border bg-black mt-8">
+            <video
+              controls
+              className="w-full aspect-video rounded-lg border bg-black mt-8"
+            >
               <source src={video} />
             </video>
           )}

app/layout.tsx

@@ -2,6 +2,7 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import { ClerkProvider } from '@clerk/nextjs'
+import { ModalProvider } from '@/components/modal-provider'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -18,7 +19,10 @@ export default function RootLayout({
   return (
     <ClerkProvider>
     <html lang="en">
-      <body className={inter.className}>{children}</body>
+      <body className={inter.className}>
+        <ModalProvider />
+        {children}
+        </body>
     </html>
     </ClerkProvider>
   )

components/FreeCounter.tsx

@@ -4,13 +4,15 @@ import { MAX_FREE_COUNTS } from "@/constants";
 import { Progress } from "@/components/ui/progress";
 import { Button } from "@/components/ui/button";
 import { Zap } from "lucide-react";
+import { useProModal } from "@/hooks/use-pro-modal";
 
 interface FreeCounterProps {
   apiLimitCount: number;
 }
 
 function FreeCounter({ apiLimitCount = 0 }: FreeCounterProps) {
   const [mounted, setMounted] = useState(false);
+  const proModal = useProModal();
   useEffect(() => {
     setMounted(true);
   }, []);
@@ -26,10 +28,17 @@ function FreeCounter({ apiLimitCount = 0 }: FreeCounterProps) {
             <p>
               {apiLimitCount}/{MAX_FREE_COUNTS} Free Generations
             </p>
-            <Progress className="h-3" value={apiLimitCount/MAX_FREE_COUNTS *100} />
+            <Progress
+              className="h-3"
+              value={(apiLimitCount / MAX_FREE_COUNTS) * 100}
+            />
           </div>
-          <Button variant="premium" className="w-full">
-            Upgrade 
+          <Button
+            onClick={proModal.onOpen}
+            variant="premium"
+            className="w-full"
+          >
+            Upgrade
             <Zap className="w-4 h-4 ml-2 fill-white" />
           </Button>
         </CardContent>

components/mobile-sidebar.tsx

@@ -6,16 +6,20 @@ import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet";
 import Sidebar from "./sidebar";
 import { useEffect, useState } from "react";
 
-const MobileSidebar = () => {
-    const [ismounted, setIsMounted]=useState(false);
+interface MobileSidebarProps {
+  apiLimitCount: number;
+}
 
-    useEffect(()=>{
-        setIsMounted(true);
-    }, []);
+const MobileSidebar = ({ apiLimitCount }: MobileSidebarProps) => {
+  const [ismounted, setIsMounted] = useState(false);
 
-    if(!ismounted){
-        return null;
-    }
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!ismounted) {
+    return null;
+  }
   return (
     <Sheet>
       <SheetTrigger>
@@ -24,7 +28,7 @@ const MobileSidebar = () => {
         </Button>
       </SheetTrigger>
       <SheetContent side="left" className="p-0">
-          <Sidebar /> 
+        <Sidebar apiLimitCount={apiLimitCount} />
       </SheetContent>
     </Sheet>
   );

components/modal-provider.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import ProModal from "@/components/pro-modal";
+
+export const ModalProvider = () => {
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
+
+  return (
+    <>
+      <ProModal />
+    </>
+  );
+};

components/navbar.tsx

@@ -1,12 +1,14 @@
-import { UserButton } from "@clerk/nextjs"
+import { UserButton } from "@clerk/nextjs";
 import MobileSidebar from "@/components/mobile-sidebar";
+import { getApiLimitCount } from "@/lib/api-limits";
 
-const Navbar = () => {
+const Navbar = async () => {
+  const apiLimitCount = await getApiLimitCount();
   return (
     <div className="flex items-center p-4">
-      <MobileSidebar />
+      <MobileSidebar apiLimitCount={apiLimitCount} />
       <div className="flex w-full justify-end">
-        <UserButton afterSignOutUrl="/" />  
+        <UserButton afterSignOutUrl="/" />
       </div>
     </div>
   );

components/pro-modal.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useProModal } from "@/hooks/use-pro-modal";
+import { Badge } from "@/components/ui/badge";
+import { Check, MessageSquare, Zap } from "lucide-react";
+import { Music } from "lucide-react";
+import { ImageIcon } from "lucide-react";
+import { VideoIcon } from "lucide-react";
+import { Code } from "lucide-react";
+import { Card } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+const tools = [
+  {
+    label: "Conversation",
+    icon: MessageSquare,
+    color: "text-violet-500",
+    bgColor: "bg-violet-500/10",
+  },
+  {
+    label: "Music Generation",
+    icon: Music,
+    color: "text-emerald-500",
+    bgColor: "bg-emerald-500/10",
+  },
+  {
+    label: "Image Generation",
+    icon: ImageIcon,
+    color: "text-pink-500",
+    bgColor: "bg-pink-500/10",
+  },
+  {
+    label: "Video Generation",
+    icon: VideoIcon,
+    color: "text-orange-500",
+    bgColor: "bg-orange-500/10",
+  },
+  {
+    label: "Code Generation",
+    icon: Code,
+    color: "text-green-500",
+    bgColor: "bg-green-500/10",
+  },
+];
+
+const ProModal = () => {
+  const proModal = useProModal();
+  return (
+    <div>
+      <Dialog open={proModal.isOpen} onOpenChange={proModal.onClose}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle className="flex justify-center items-center flex-col gap-y-4 pb-2">
+              <div className="flex items-center gap-x-2 font-bold py-1">
+                Upgrade to DeepAI
+                <Badge variant="premium" className="uppercase text-sm py-1">
+                  pro
+                </Badge>
+              </div>
+            </DialogTitle>
+            <DialogDescription className="text-center pt-2 space-y-2 text-zinc-900 font-medium">
+              {tools.map((tool) => (
+                <Card
+                  key={tool.label}
+                  className="p-3 border-black/5 flex justify-between items-center"
+                >
+                  <div className="flex items-center gap-x-4">
+                    <div className={cn("p-2 w-fit rounded-md", tool.bgColor)}>
+                      <tool.icon className={cn("w-6 h-6", tool.color)} />
+                    </div>
+                    <div className="font-semibold text-sm ">{tool.label}</div>
+                  </div>
+                  <Check className="text-primary w-5 h-5" />
+                </Card>
+              ))}
+            </DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <Button size="lg" variant="premium" className="w-full">
+              Upgrade
+              <Zap className="w-4 h-4 ml-2 fill-white" />
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default ProModal;