From 8ae5933d299510efb3094ba8ef72a2cd14c4beee Mon Sep 17 00:00:00 2001
From: Mandeep Singh <mandeeparora132@gmail.com>
Date: Mon, 24 Jun 2024 00:48:39 +0530
Subject: [PATCH 1/2] Integrate the Stripe Subscriptions API as the payment
 gateway

---
 app/(root)/create-podcast/page.tsx      | 126 ++++---
 app/(root)/layout.tsx                   |   3 -
 app/(root)/profile/[profileId]/page.tsx |   1 +
 app/layout.tsx                          |  12 +-
 app/plans/page.tsx                      | 479 ++++++++++++++++++++++++
 components/ButtonSpinner.tsx            |  25 ++
 components/GenerateThumbnail.tsx        | 114 ++++--
 components/LeftSidebar.tsx              |   5 +-
 components/ProfileCard.tsx              |  35 +-
 components/ui/toast.tsx                 |   2 +
 constants/index.ts                      |  87 +++++
 convex/_generated/api.d.ts              |  10 +-
 convex/crons.ts                         |  13 +
 convex/http.ts                          |  23 ++
 convex/openai.ts                        | 173 ++++++++-
 convex/payments.ts                      |  30 ++
 convex/podcasts.ts                      |  64 +++-
 convex/schema.ts                        |  29 +-
 convex/stripe.ts                        | 281 ++++++++++++++
 convex/tasks.ts                         |   8 -
 convex/users.ts                         | 157 +++++++-
 convex/util.ts                          |   9 +
 hooks/useIsSubscribed.ts                |  36 ++
 lib/rateLimits.ts                       |  16 +
 package-lock.json                       |  62 ++-
 package.json                            |   6 +-
 providers/IsFetchingProvider.tsx        |  31 ++
 public/icons/chart.svg                  |   6 +
 public/icons/premium.svg                | 249 ++++++++++++
 public/images/blueBlob.svg              |  69 ++++
 types/index.ts                          |   6 +
 31 files changed, 2046 insertions(+), 121 deletions(-)
 create mode 100644 app/plans/page.tsx
 create mode 100644 components/ButtonSpinner.tsx
 create mode 100644 convex/crons.ts
 create mode 100644 convex/payments.ts
 create mode 100644 convex/stripe.ts
 delete mode 100644 convex/tasks.ts
 create mode 100644 convex/util.ts
 create mode 100644 hooks/useIsSubscribed.ts
 create mode 100644 lib/rateLimits.ts
 create mode 100644 providers/IsFetchingProvider.tsx
 create mode 100644 public/icons/chart.svg
 create mode 100644 public/icons/premium.svg
 create mode 100644 public/images/blueBlob.svg

diff --git a/app/(root)/create-podcast/page.tsx b/app/(root)/create-podcast/page.tsx
index be32cec..eac0840 100644
--- a/app/(root)/create-podcast/page.tsx
+++ b/app/(root)/create-podcast/page.tsx
@@ -24,16 +24,18 @@ import {
   SelectValue,
 } from "@/components/ui/select"
 import { cn } from "@/lib/utils"
-import { useState } from "react"
+import { use, useState } from "react"
 import { Textarea } from "@/components/ui/textarea"
 import GeneratePodcast from "@/components/GeneratePodcast"
 import GenerateThumbnail from "@/components/GenerateThumbnail"
-import { Loader } from "lucide-react"
+import { Loader, Lock, LockKeyhole } from "lucide-react"
 import { Id } from "@/convex/_generated/dataModel"
 import { useToast } from "@/components/ui/use-toast"
 import { useMutation } from "convex/react"
 import { api } from "@/convex/_generated/api"
 import { useRouter } from "next/navigation"
+import { useIsSubscribed } from "@/hooks/useIsSubscribed"
+import { useClerk } from "@clerk/nextjs"
 
 const voiceCategories = ['alloy', 'shimmer', 'nova', 'echo', 'fable', 'onyx'];
 
@@ -59,6 +61,10 @@ const CreatePodcast = () => {
 
   const createPodcast = useMutation(api.podcasts.createPodcast)
 
+  const { user } = useClerk();
+
+  const isSubscribed = useIsSubscribed(user?.id!);
+
   const { toast } = useToast()
 
   // 1. Define your form.
@@ -114,16 +120,25 @@ const CreatePodcast = () => {
       <h1 className="text-20 font-bold text-white-1">Create Podcast</h1>
 
       <Form {...form}>
-        <form onSubmit={form.handleSubmit(onSubmit)} className="mt-12 flex w-full flex-col">
+        <form
+          onSubmit={form.handleSubmit(onSubmit)}
+          className="mt-12 flex w-full flex-col"
+        >
           <div className="flex flex-col gap-[30px] border-b border-black-5 pb-10">
             <FormField
               control={form.control}
               name="podcastTitle"
               render={({ field }) => (
                 <FormItem className="flex flex-col gap-2.5">
-                  <FormLabel className="text-16 font-bold text-white-1">Title</FormLabel>
+                  <FormLabel className="text-16 font-bold text-white-1">
+                    Title
+                  </FormLabel>
                   <FormControl>
-                    <Input className="input-class focus-visible:ring-offset-[--accent-color]" placeholder="The Joe Rogan Podcast" {...field} />
+                    <Input
+                      className="input-class focus-visible:ring-offset-[--accent-color]"
+                      placeholder="The Joe Rogan Podcast"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage className="text-white-1" />
                 </FormItem>
@@ -136,12 +151,30 @@ const CreatePodcast = () => {
               </Label>
 
               <Select onValueChange={(value) => setVoiceType(value)}>
-                <SelectTrigger className={cn('text-16 w-full border-none bg-black-1 text-gray-1 focus-visible:ring-offset-[--accent-color]')}>
-                  <SelectValue placeholder="Select AI Voice" className="placeholder:text-gray-1 " />
+                <SelectTrigger
+                  className={cn(
+                    "text-16 w-full border-none bg-black-1 text-gray-1 focus-visible:ring-offset-[--accent-color]"
+                  )}
+                >
+                  <SelectValue
+                    placeholder="Select AI Voice"
+                    className="placeholder:text-gray-1 "
+                  />
                 </SelectTrigger>
-                <SelectContent className="text-16 border-none bg-black-1 font-bold text-white-1 focus:ring-[--accent-color]">
+                <SelectContent className="text-16 flex border-none bg-black-1 font-bold text-white-1 focus:ring-[--accent-color]">
                   {voiceCategories.map((category) => (
-                    <SelectItem key={category} value={category} className="capitalize focus:bg-[--accent-color]">
+                    <SelectItem
+                      // disable all voices except alloy for non-subscribed users
+                      disabled={ category !== 'alloy' && !isSubscribed}
+                      key={category}
+                      value={category}
+                      className="capitalize relative  flex items-center focus:bg-[--accent-color]"
+                    >
+                      {!isSubscribed && category !== "alloy" && (
+                        <span className="absolute left-0 top-0 bottom-0 inline-flex items-center justify-center">
+                          <LockKeyhole />
+                        </span>
+                      )}
                       {category}
                     </SelectItem>
                   ))}
@@ -161,9 +194,15 @@ const CreatePodcast = () => {
               name="podcastDescription"
               render={({ field }) => (
                 <FormItem className="flex flex-col gap-2.5">
-                  <FormLabel className="text-16 font-bold text-white-1">Description</FormLabel>
+                  <FormLabel className="text-16 font-bold text-white-1">
+                    Description
+                  </FormLabel>
                   <FormControl>
-                    <Textarea className="input-class focus-visible:ring-offset-[--accent-color]" placeholder="Write a short podcast description" {...field} />
+                    <Textarea
+                      className="input-class focus-visible:ring-offset-[--accent-color]"
+                      placeholder="Write a short podcast description"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage className="text-white-1" />
                 </FormItem>
@@ -171,41 +210,44 @@ const CreatePodcast = () => {
             />
           </div>
           <div className="flex flex-col pt-10">
-              <GeneratePodcast
-                setAudioStorageId={setAudioStorageId}
-                setAudio={setAudioUrl}
-                voiceType={voiceType!}
-                audio={audioUrl}
-                voicePrompt={voicePrompt}
-                setVoicePrompt={setVoicePrompt}
-                setAudioDuration={setAudioDuration}
-              />
-
-              <GenerateThumbnail
-               setImage={setImageUrl}
-               setImageStorageId={setImageStorageId}
-               image={imageUrl}
-               imagePrompt={imagePrompt}
-               setImagePrompt={setImagePrompt}
-              />
-
-              <div className="mt-10 w-full">
-                <Button type="submit" className="text-16 w-full bg-[--accent-color] py-4 font-extrabold text-white-1 transition-all duration-500 hover:bg-black-1">
-                  {isSubmitting ? (
-                    <>
-                      Submitting
-                      <Loader size={20} className="animate-spin ml-2" />
-                    </>
-                  ) : (
-                    'Submit & Publish Podcast'
-                  )}
-                </Button>
-              </div>
+            <GeneratePodcast
+              setAudioStorageId={setAudioStorageId}
+              setAudio={setAudioUrl}
+              voiceType={voiceType!}
+              audio={audioUrl}
+              voicePrompt={voicePrompt}
+              setVoicePrompt={setVoicePrompt}
+              setAudioDuration={setAudioDuration}
+            />
+
+            <GenerateThumbnail
+              setImage={setImageUrl}
+              setImageStorageId={setImageStorageId}
+              image={imageUrl}
+              imagePrompt={imagePrompt}
+              setImagePrompt={setImagePrompt}
+            />
+
+            <div className="mt-10 w-full">
+              <Button
+                type="submit"
+                className="text-16 w-full bg-[--accent-color] py-4 font-extrabold text-white-1 transition-all duration-500 hover:bg-black-1"
+              >
+                {isSubmitting ? (
+                  <>
+                    Submitting
+                    <Loader size={20} className="animate-spin ml-2" />
+                  </>
+                ) : (
+                  "Submit & Publish Podcast"
+                )}
+              </Button>
+            </div>
           </div>
         </form>
       </Form>
     </section>
-  )
+  );
 }
 
 export default CreatePodcast
\ No newline at end of file
diff --git a/app/(root)/layout.tsx b/app/(root)/layout.tsx
index 432410f..55807d9 100644
--- a/app/(root)/layout.tsx
+++ b/app/(root)/layout.tsx
@@ -2,7 +2,6 @@ import LeftSidebar from "@/components/LeftSidebar";
 import MobileNav from "@/components/MobileNav";
 import RightSidebar from "@/components/RightSidebar";
 import Image from "next/image";
-import { Toaster } from "@/components/ui/toaster"
 import PodcastPlayer from "@/components/PodcastPlayer";
 
 export default function RootLayout({
@@ -27,8 +26,6 @@ export default function RootLayout({
               <MobileNav />
             </div>
             <div className="flex flex-col md:pb-14">
-              <Toaster />
-
               {children}
             </div>
           </div>
diff --git a/app/(root)/profile/[profileId]/page.tsx b/app/(root)/profile/[profileId]/page.tsx
index a8ff5b3..c9e0902 100644
--- a/app/(root)/profile/[profileId]/page.tsx
+++ b/app/(root)/profile/[profileId]/page.tsx
@@ -31,6 +31,7 @@ const ProfilePage = ({
       </h1>
       <div className="mt-6 flex flex-col gap-6 max-md:items-center md:flex-row">
         <ProfileCard
+          profileId={params.profileId}
           podcastData={podcastsData!}
           imageUrl={user?.imageUrl!}
           userFirstName={user?.name!}
diff --git a/app/layout.tsx b/app/layout.tsx
index e73f665..3263150 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,7 +3,8 @@ import { Manrope } from "next/font/google";
 import "./globals.css";
 import ConvexClerkProvider from "../providers/ConvexClerkProvider";
 import AudioProvider from "@/providers/AudioProvider";
-// import Script from "next/script";
+import { Toaster } from "@/components/ui/toaster";
+import IsFetchingProvider  from "@/providers/IsFetchingProvider";
 
 const manrope = Manrope({ subsets: ["latin"] });
 
@@ -22,13 +23,16 @@ export default function RootLayout({
 }>) {
   return (
     <ConvexClerkProvider>
-      <html lang="en">
+      <html lang="en" suppressHydrationWarning>
+        <IsFetchingProvider>
         <AudioProvider>
           <body className={`${manrope.className}`}>
-              {children}
+              <Toaster />
+            {children}
           </body>
           {/* <Script async src="https://js.stripe.com/v3/pricing-table.js"></Script> */}
-        </AudioProvider>
+          </AudioProvider>
+        </IsFetchingProvider>
       </html>
     </ConvexClerkProvider>
   );
diff --git a/app/plans/page.tsx b/app/plans/page.tsx
new file mode 100644
index 0000000..c8d3343
--- /dev/null
+++ b/app/plans/page.tsx
@@ -0,0 +1,479 @@
+"use client";
+
+import { useAction, useQuery } from "convex/react";
+import { api } from "@/convex/_generated/api";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import React, { useEffect, useState } from "react";
+import { useSearchParams } from "next/navigation";
+import Image from "next/image";
+import { useGetPlan, useIsSubscribed } from "@/hooks/useIsSubscribed";
+import { useClerk } from "@clerk/nextjs";
+import { useToast } from "@/components/ui/use-toast";
+import LeftSidebar from "@/components/LeftSidebar";
+import RightSidebar from "@/components/RightSidebar";
+import MobileNav from "@/components/MobileNav";
+import {
+  Activity,
+  Battery,
+  BatteryFull,
+  BatteryLow,
+  BatteryMedium,
+} from "lucide-react";
+import PodcastPlayer from "@/components/PodcastPlayer";
+import { useIsFetching } from "@/providers/IsFetchingProvider";
+import LoaderSpinner from "@/components/LoaderSpinner";
+import { pricingPlans } from "@/constants";
+import ButtonSpinner from "@/components/ButtonSpinner";
+
+type planDetails = {
+  subscriptionId: string | null;
+  plan: string | null;
+  endsOn: number | null;
+};
+
+export default function Payments() {
+  const [success, setSuccess] = useState(false);
+  const router = useRouter();
+  const [annual, setAnnual] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [selectedPlan, setSelectedPlan] = useState("");
+  const searchParams = useSearchParams();
+  const { user } = useClerk();
+  const { toast } = useToast();
+  const { isFetching } = useIsFetching();
+
+  const isSubscribed = useIsSubscribed(user?.id ?? "");
+  const planDetails = useGetPlan(user?.id ?? "") as planDetails;
+
+  const totalPodcasts = useQuery(api.users.getTotalPodcastsOfUser, {
+    clerkId: user?.id ?? "",
+  });
+
+  const pay = useAction(api.stripe.pay);
+  const cancel = useAction(api.stripe.cancelSubscription);
+  const manage = useAction(api.stripe.createCustomerPortal);
+
+  /**
+   * TODO: Get the remaining podcasts based on the plan of the user from the database instead of hardcoding it.
+   */
+
+  const podcastsRemaining =
+    planDetails.plan === "Enterprise"
+      ? "unlimited"
+      : ((30 - totalPodcasts!) as number);
+
+  const handleUpgrade = async (plan: string) => {
+    setSelectedPlan(plan);
+    setIsLoaded(true);
+    if (plan === "Free") {
+      router.push("/");
+      return;
+    }
+
+    if (annual) {
+      plan = plan + "-annual";
+    }
+
+    try {
+      const paymentUrl = await pay({ plan });
+      router.push(paymentUrl!);
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "An error occurred while processing your payment",
+        variant: "destructive",
+      });
+      setIsLoaded(false);
+      setSelectedPlan("");
+    }
+    setIsLoaded(false);
+    setSelectedPlan("");
+  };
+
+  const handleCancellation = async () => {
+    setSelectedPlan("cancel");
+    setIsLoaded(true);
+
+    const confirm = window.confirm(
+      "Are you sure you want to cancel your subscription?"
+    );
+
+    if (!confirm) {
+      setSelectedPlan("");
+      setIsLoaded(false);
+      return;
+    }
+
+    if (!user) {
+      toast({
+        title: "Error",
+        description: "You must be logged in to cancel your subscription",
+        variant: "destructive",
+      });
+      setSelectedPlan("");
+      setIsLoaded(false);
+      return;
+    }
+
+    if (planDetails.plan === "Free") {
+      toast({
+        title: "Error",
+        description: "You cannot cancel a free subscription",
+        variant: "destructive",
+      });
+
+      setSelectedPlan("");
+      setIsLoaded(false);
+      return;
+    }
+
+    try {
+      const cancelPlan = await cancel({ clerkId: user.id });
+
+      if (cancelPlan.success) {
+        toast({
+          title: "Success",
+          description: "Your subscription has been cancelled",
+          variant: "success",
+        });
+
+        setSelectedPlan("");
+        setIsLoaded(false);
+        router.replace("/");
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description:
+          "An error occurred while cancelling your subscription, please try again later.",
+        variant: "destructive",
+      });
+      setSelectedPlan("");
+      setIsLoaded(false);
+    }
+  };
+
+  const handleManageSubscription = async () => {
+
+    try {
+      setSelectedPlan("manage");
+      setIsLoaded(true);
+      const portalUrl = await manage();
+      router.push(portalUrl!);
+      setIsLoaded(false);
+      setSelectedPlan("");
+    } catch (error) {
+      setSelectedPlan("");
+      setIsLoaded(false);
+      toast({
+        title: "Error",
+        description: "An error occurred while processing your request",
+        variant: "destructive",
+      });
+    }
+  }
+
+  // if the payment was successful, the user will be redirected to the plans page with a query parameter.
+  // This block checks for the query parameter and displays a success message to the user.
+  useEffect(() => {
+    if (searchParams.get("session_id") && isSubscribed) {
+      setSuccess(true);
+
+      toast({
+        title: "Payment successful ✅",
+        variant: "success",
+      });
+    }
+    // remove the query parameter from the URL and update the state after 5 seconds.
+    setTimeout(() => {
+      router.replace("/plans");
+      setSuccess(false);
+    }, 5000);
+  }, [searchParams, isSubscribed, toast, router]);
+
+  if (success) {
+    return (
+      <main className="flex relative flex-col w-full items-center justify-center min-h-screen bg-zinc-950">
+        <Image
+          width={1920}
+          height={1080}
+          className="absolute w-screen h-full min-h-screen object-cover z-0"
+          src="/images/blueBlob.svg"
+          alt="alt text"
+        />
+        <div className="flex flex-col items-center justify-center w-full h-full">
+          <h1 className="text-4xl font-bold text-white-1 z-50 text-center">
+            Thank you for subscribing!
+          </h1>
+          <p className=" text-gray-300 mt-4 z-30 text-center">
+            You are now subscribed to the {planDetails.plan} plan.
+          </p>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <>
+      {isFetching && !isSubscribed ? (
+        <div className="fixed top-0 left-0 z-50 w-full h-full bg-[--primary-color] flex items-center justify-center">
+          <LoaderSpinner />
+        </div>
+      ) : isSubscribed ? (
+        <div className="flex relative flex-col">
+          <div className="flex relative w-full min-h-screen">
+            <LeftSidebar />
+            <div className="flex flex-col flex-1 bg-[--primary-color] rounded-lg p-[24px] w-full">
+              <div className="flex h-16 items-center justify-between md:hidden">
+                <Image
+                  src="/icons/miclogo.svg"
+                  width={30}
+                  height={30}
+                  alt="menu icon"
+                />
+                <MobileNav />
+              </div>
+
+              <h1 className="text-4xl font-bold text-white-1 text-center">
+                Your current plan
+              </h1>
+              <div className="flex flex-col gap-4 mt-8">
+                <div className="flex flex-col gap-2">
+                  <h2 className="text-xl font-semibold text-white-1">
+                    Plan details
+                  </h2>
+                  <div className="flex flex-col w-full mx-auto">
+                    <p className="flex relative justify-between items-center text-base text-slate-300">
+                      <div className="flex items-center self-start gap-2">
+                        Your current plan is the {planDetails.plan} plan{" "}
+                        {
+                          // display billed annually if the planDetails.endsOn date is greater than 30 days from now
+                          planDetails.endsOn! >
+                          Date.now() + 30 * 24 * 60 * 60 * 1000 ? (
+                            <span className="inline-flex me-2 items-center text-xs text-gray-300 bg-gray-700  rounded-full py-0.5 px-2.5">
+                              Billed annually
+                            </span>
+                          ) : null
+                        }
+                      </div>
+                      {
+                        <div className="flex gap-4">
+                          <Button
+                            onClick={() => handleManageSubscription()}
+                            title="Manage"
+                            className="w-[fit-content] hover:brightness-[.85] bg-[--accent-color] text-white-1"
+                          >
+                              {isLoaded && selectedPlan === "manage" ? (
+                            <ButtonSpinner />
+                            ) : null}
+                            Manage
+                          </Button>
+
+                          <Button
+                            onClick={() => handleCancellation()}
+                            title="Cancel"
+                            className="w-[fit-content] hover:brightness-[.85] bg-red-500 text-white-1"
+                          >
+                            {isLoaded && selectedPlan === "cancel" ? (
+                            <ButtonSpinner />
+                            ) : null}
+                            Cancel
+                          </Button>
+                        </div>
+                      }
+                    </p>
+
+                    <p className="text-base text-slate-300">
+                      Your subscription ends on{" "}
+                      {new Date(planDetails.endsOn!).toLocaleDateString()}
+                    </p>
+                  </div>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <h2 className="text-xl font-semibold text-white-1">Usage</h2>
+                  <div className="flex flex-col gap-2">
+                    <p className="text-base text-slate-300">
+                      <Activity
+                        size={24}
+                        className="inline-flex mr-2 text-white-1"
+                      />
+                      You have created {totalPodcasts} podcasts this month.
+                    </p>
+                    <p className="flex items-center text-base text-slate-300">
+                      {podcastsRemaining === "unlimited" ||
+                      podcastsRemaining - totalPodcasts! == 30 ? (
+                        <BatteryFull
+                          size={24}
+                          className="inline-flex mr-2 text-white-1"
+                          style={{ transform: "rotate(270deg)" }}
+                        />
+                      ) : podcastsRemaining > 10 ? (
+                        <BatteryMedium
+                          size={24}
+                          className="inline-flex mr-2 text-white-1"
+                          style={{ transform: "rotate(270deg)" }}
+                        />
+                      ) : podcastsRemaining <= 10 && podcastsRemaining > 0 ? (
+                        <BatteryLow
+                          size={24}
+                          className="inline-flex mr-2 text-white-1"
+                          style={{ transform: "rotate(270deg)" }}
+                        />
+                      ) : podcastsRemaining === 0 ? (
+                        <Battery
+                          size={24}
+                          className="inline-flex mr-2 text-white-1"
+                          style={{ transform: "rotate(270deg)" }}
+                        />
+                      ) : null}
+                      You have {podcastsRemaining} podcasts remaining for the
+                      month of{" "}
+                      {new Date().toLocaleString("default", { month: "long" })}.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <RightSidebar />
+          </div>
+          <PodcastPlayer />
+        </div>
+      ) : (
+        <main className="flex relative flex-col w-full items-center justify-center min-h-screen bg-zinc-950">
+          <Image
+            width={1920}
+            height={1080}
+            className="absolute w-screen h-full min-h-screen object-cover z-0"
+            src="/images/blueBlob.svg"
+            alt="alt text"
+          />
+
+          <div className="relative items-center px-8 py-6 mx-auto md:px-12 max-w-7xl">
+            <h1 className="text-4xl font-bold text-white-1 z-50 text-center">
+              Choose a plan that works for you
+            </h1>
+
+            <div className="md:max-w-sm mx-auto">
+              <div className="inline-flex w-full border rounded-full my-6 overflow-hidden border-[#fff3] p-0.5 z-0">
+                <button
+                  type="button"
+                  onClick={() => setAnnual(false)}
+                  className={` ${annual ? "" : "bg-[#00000080]"} font-medium rounded-full transition h-12 w-full py-2 block px-8 text-xs text-white-1`}
+                >
+                  Monthly
+                </button>
+                <button
+                  onClick={() => setAnnual(true)}
+                  className={` ${annual ? "bg-[#00000080]" : ""} font-medium rounded-full transition h-12 w-full py-2 block px-8 text-xs border-white text-white-1`}
+                  type="button"
+                >
+                  Annual
+                </button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 gap-2 mt-12 lg:grid-cols-3">
+              {pricingPlans.map((plan) => (
+                <div
+                  key={plan.name}
+                  className={`flex flex-col justify-between p-8 shadow-2xl  rounded-3xl ${plan.cardBgClass} backdrop-blur-3xl shadow-gray-900/50`}
+                >
+                  <div>
+                    <div className="flex flex-col justify-between gap-3">
+                      <p className="text-xl font-medium tracking-tight text-white-1">
+                        {plan.name}
+                      </p>
+                      <p className="text-white-1">
+                        <span className="text-2xl tracking-tight">
+                          <span>
+                            ${annual ? plan.annualPrice : plan.monthlyPrice}
+                          </span>
+                        </span>
+                        <span className="text-base font-medium">
+                          /m
+                          <span>
+                            {annual &&
+                              plan.annualPrice !== "0" &&
+                              " (billed annually)"}
+                          </span>
+                        </span>
+                      </p>
+                    </div>
+                    <p className="mt-8 text-xs text-[#fffc]">
+                      {plan.description}
+                    </p>
+                    <ul className="flex flex-col order-last mt-8 text-sm text-white gap-y-3">
+                      {plan.features.map((feature) => (
+                        <li
+                          key={feature}
+                          className="inline-flex text-white-1 items-center gap-2"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="icon icon-tabler icon-tabler-circle-check"
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            strokeWidth="2"
+                            stroke="currentColor"
+                            fill="none"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          >
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                            <path d="M9 12l2 2l4 -4" />
+                          </svg>
+                          {feature}
+                        </li>
+                      ))}
+                      {plan.unavailableFeatures.map((feature) => (
+                        <li
+                          key={feature}
+                          className="inline-flex text-white-1 items-center gap-2 opacity-50"
+                        >
+                          <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="icon icon-tabler icon-tabler-circle-x"
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            strokeWidth="2"
+                            stroke="currentColor"
+                            fill="none"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                          >
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
+                            <path d="M10 10l4 4m0 -4l-4 4" />
+                          </svg>
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <div className="flex mt-6">
+                    <button
+                      onClick={() => handleUpgrade(plan.name)}
+                      title={plan.name}
+                      aria-label="get started"
+                      className={`flex items-center justify-center w-full  h-12 px-4 py-2 text-base font-medium transition-all duration-200 rounded-xl ${plan.buttonClass}`}
+                    >
+                      {isLoaded && plan.name === selectedPlan ? (
+                        <ButtonSpinner />
+                      ) : (
+                        "Get started"
+                      )}
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </main>
+      )}
+    </>
+  );
+}
diff --git a/components/ButtonSpinner.tsx b/components/ButtonSpinner.tsx
new file mode 100644
index 0000000..ccf75d0
--- /dev/null
+++ b/components/ButtonSpinner.tsx
@@ -0,0 +1,25 @@
+export default function ButtonSpinner() {
+  return (
+    <svg
+      className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        stroke-width="4"
+      ></circle>
+
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  );
+}
\ No newline at end of file
diff --git a/components/GenerateThumbnail.tsx b/components/GenerateThumbnail.tsx
index 3c67e9a..dac855b 100644
--- a/components/GenerateThumbnail.tsx
+++ b/components/GenerateThumbnail.tsx
@@ -1,10 +1,10 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button } from './ui/button'
 import { cn } from '@/lib/utils';
 import { Label } from './ui/label';
 import { Textarea } from './ui/textarea';
 import { GenerateThumbnailProps } from '@/types';
-import { Loader } from 'lucide-react';
+import { Loader , Lock, LockKeyhole} from 'lucide-react';
 import { Input } from './ui/input';
 import Image from 'next/image';
 import { useToast } from './ui/use-toast';
@@ -12,6 +12,14 @@ import { useAction, useMutation } from 'convex/react';
 import { useUploadFiles } from '@xixixao/uploadstuff/react';
 import { api } from '@/convex/_generated/api';
 import { v4 as uuidv4 } from 'uuid';
+import { useGetPlan, useIsSubscribed } from '@/hooks/useIsSubscribed';
+import { useClerk } from '@clerk/nextjs';
+
+type planDetails = {
+  subscriptionId: string;
+  endsOn: number;
+  plan: string;
+};
 
 const GenerateThumbnail = ({ setImage, setImageStorageId, image, imagePrompt, setImagePrompt }: GenerateThumbnailProps) => {
   const [isAiThumbnail, setIsAiThumbnail] = useState(false);
@@ -21,7 +29,13 @@ const GenerateThumbnail = ({ setImage, setImageStorageId, image, imagePrompt, se
   const generateUploadUrl = useMutation(api.files.generateUploadUrl);
   const { startUpload } = useUploadFiles(generateUploadUrl)
   const getImageUrl = useMutation(api.podcasts.getUrl);
-  const handleGenerateThumbnail = useAction(api.openai.generateThumbnailAction)
+
+
+  const { user } = useClerk();
+  const isSubscribed = useIsSubscribed(user?.id!);
+  const { plan } = useGetPlan(user?.id!) as planDetails;
+
+  const handleGenerateThumbnail = useAction(api.openai.generateThumbnailAction);
 
   const handleImage = async (blob: Blob, fileName: string) => {
     setIsImageLoading(true);
@@ -88,31 +102,66 @@ const GenerateThumbnail = ({ setImage, setImageStorageId, image, imagePrompt, se
     }
   }
 
+  useEffect(() => {
+    if (!isSubscribed) {
+      setIsAiThumbnail(false);
+    }
+  }, [isSubscribed])
+
+
+  function handleGenerateButton(state: boolean) {
+    // do not allow the isAiThumbnail to be true if the user is not a subscriber
+    if ((!isSubscribed || plan === "FREE")) {
+      setIsAiThumbnail(false);
+      toast({
+        title: "Please subscribe to use this feature",
+      })
+
+      return;
+    }
+
+    setIsAiThumbnail(state);
+  }
+
   return (
     <>
       <div className="generate_thumbnail">
         <Button
           type="button"
           variant="plain"
-          onClick={() => setIsAiThumbnail(true)}
-          className={cn('', {
-            'bg-black-6': isAiThumbnail
+          disabled={isSubscribed && plan === "FREE"}
+          onClick={() => handleGenerateButton(true)}
+          className={cn(`${
+            isAiThumbnail ? "bg-black-6" : "" } ${
+            !isSubscribed ? "cursor-not-allowed" : ""
+          }`, {
+            "bg-black-6": isAiThumbnail,
           })}
         >
-          Use AI to generate thumbnail
+          {
+            // show a lock icon if the user is not a subscriber
+            !isSubscribed || plan === "FREE" ? (
+              <div className='flex justify-center items-center'>
+                <LockKeyhole size={20} className="mr-2" />
+                <span>Use AI to generate thumbnail</span>
+              </div>
+            ) : (
+              "Use AI to generate thumbnail"
+            )
+          }
         </Button>
         <Button
           type="button"
           variant="plain"
           onClick={() => setIsAiThumbnail(false)}
-          className={cn('', {
-            'bg-black-6': !isAiThumbnail
+          className={cn("", {
+            "bg-black-6": !isAiThumbnail,
           })}
         >
           Upload custom image
         </Button>
       </div>
-      {isAiThumbnail ? (
+      {isAiThumbnail && isSubscribed ? (
         <div className="flex flex-col gap-5">
           <div className="mt-5 flex flex-col gap-2.5">
             <Label className="text-16 font-bold text-white-1">
@@ -120,23 +169,27 @@ const GenerateThumbnail = ({ setImage, setImageStorageId, image, imagePrompt, se
             </Label>
             <Textarea
               className="input-class font-light focus-visible:ring-offset-[--accent-color]"
-              placeholder='Provide a short description to generate thumbnail'
+              placeholder="Provide a short description to generate thumbnail"
               rows={5}
               value={imagePrompt}
               onChange={(e) => setImagePrompt(e.target.value)}
             />
           </div>
           <div className="w-full max-w-[200px]">
-          <Button type="submit" className="text-16 bg-[--accent-color] py-4 font-bold text-white-1" onClick={generateImage}>
-            {isImageLoading ? (
-              <>
-                Generating
-                <Loader size={20} className="animate-spin ml-2" />
-              </>
-            ) : (
-              'Generate'
-            )}
-          </Button>
+            <Button
+              type="submit"
+              className="text-16 bg-[--accent-color] py-4 font-bold text-white-1"
+              onClick={generateImage}
+            >
+              {isImageLoading ? (
+                <>
+                  Generating
+                  <Loader size={20} className="animate-spin ml-2" />
+                </>
+              ) : (
+                "Generate"
+              )}
+            </Button>
           </div>
         </div>
       ) : (
@@ -148,18 +201,25 @@ const GenerateThumbnail = ({ setImage, setImageStorageId, image, imagePrompt, se
             onChange={(e) => uploadImage(e)}
           />
           {!isImageLoading ? (
-            <Image src="/icons/upload-image.svg" width={40} height={40} alt="upload" />
-          ): (
+            <Image
+              src="/icons/upload-image.svg"
+              width={40}
+              height={40}
+              alt="upload"
+            />
+          ) : (
             <div className="text-16 flex-center font-medium text-white-1">
               Uploading
               <Loader size={20} className="animate-spin ml-2" />
             </div>
           )}
           <div className="flex flex-col items-center gap-1">
-           <h2 className="text-12 font-bold text-[--accent-color]">
-            Click to upload
+            <h2 className="text-12 font-bold text-[--accent-color]">
+              Click to upload
             </h2>
-            <p className="text-12 font-normal text-gray-1">SVG, PNG, JPG, or GIF (max. 1080x1080px)</p>
+            <p className="text-12 font-normal text-gray-1">
+              SVG, PNG, JPG, or GIF (max. 1080x1080px)
+            </p>
           </div>
         </div>
       )}
@@ -175,7 +235,7 @@ const GenerateThumbnail = ({ setImage, setImageStorageId, image, imagePrompt, se
         </div>
       )}
     </>
-  )
+  );
 }
 
 export default GenerateThumbnail
\ No newline at end of file
diff --git a/components/LeftSidebar.tsx b/components/LeftSidebar.tsx
index c771a9a..014ccac 100644
--- a/components/LeftSidebar.tsx
+++ b/components/LeftSidebar.tsx
@@ -15,6 +15,7 @@ const LeftSidebar = () => {
   const router = useRouter();
   const { signOut } = useClerk();
   const { audio } = useAudio();
+  const { user } = useClerk();
 
   return (
     <section className={cn("left_sidebar h-[calc(100vh-1px)]", {
@@ -29,7 +30,9 @@ const LeftSidebar = () => {
         {sidebarLinks.map(({ route, label, imgURL }) => {
           const isActive = pathname === route || pathname.startsWith(`${route}/`);
 
-          return <Link href={route} key={label} className={cn("flex gap-3 items-center py-4 max-lg:px-4 justify-center lg:justify-start", {
+          return <Link href={
+            route === '/profile' && user?.id ? `${route}/${user?.id}` : route
+          } key={label} className={cn("flex gap-3 items-center py-4 max-lg:px-4 justify-center lg:justify-start", {
             'bg-nav-focus border-r-4 border-[--accent-color]': isActive
           })}>
             <Image src={imgURL} alt={label} width={24} height={24} />
diff --git a/components/ProfileCard.tsx b/components/ProfileCard.tsx
index 6729e83..e6dc2ab 100644
--- a/components/ProfileCard.tsx
+++ b/components/ProfileCard.tsx
@@ -7,11 +7,19 @@ import { PodcastProps, ProfileCardProps } from "@/types";
 
 import LoaderSpinner from "./LoaderSpinner";
 import { Button } from "./ui/button";
+import { useIsSubscribed, useGetPlan } from "@/hooks/useIsSubscribed";
+
+type planDetails = {
+  subscriptionId: string;
+  endsOn: number;
+  plan: string;
+};
 
 const ProfileCard = ({
   podcastData,
   imageUrl,
   userFirstName,
+  profileId,
 }: ProfileCardProps) => {
   const { setAudio } = useAudio();
 
@@ -23,6 +31,9 @@ const ProfileCard = ({
     setRandomPodcast(podcastData.podcasts[randomIndex]);
   };
 
+  const isSubscribed = useIsSubscribed(profileId);
+  const { plan } = useGetPlan(profileId) as planDetails;
+
   useEffect(() => {
     if (randomPodcast) {
       setAudio({
@@ -51,18 +62,32 @@ const ProfileCard = ({
           <figure className="flex gap-2 max-md:justify-center">
             <Image
               src="/icons/verified.svg"
-              width={15}
-              height={15}
+              width={24}
+              height={24}
               alt="verified"
             />
             <h2 className="text-14 font-medium text-white-2">
               Verified Creator
             </h2>
           </figure>
-          <h1 className="text-32 font-extrabold tracking-[-0.32px] text-white-1">
-            {userFirstName}
-          </h1>
+          <div className="flex gap-4 items-center justify-stretch">
+            <h1 className="text-32 font-extrabold mr-2 tracking-[-0.32px] text-white-1">
+              {userFirstName}
+            </h1>
+            {isSubscribed && (
+              <figure className="inline-flex gap-2 cursor-pointer max-md:justify-center">
+                <Image
+                  src="/icons/premium.svg"
+                  width={24}
+                  height={24}
+                  alt="premium"
+                />
+                <h2 className="text-16 font-semibold text-white-2">{plan}</h2>
+              </figure>
+            )}
+          </div>
         </div>
+
         <figure className="flex gap-3 py-6">
           <Image
             src="/icons/headphone.svg"
diff --git a/components/ui/toast.tsx b/components/ui/toast.tsx
index 9d065aa..1b7a04b 100644
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -32,6 +32,8 @@ const toastVariants = cva(
         default: "border bg-[--accent-color] text-white-1",
         destructive:
           "destructive border-red-500 bg-red-500 text-slate-50 dark:border-red-900 dark:bg-red-900",
+        success: "success border-green-500 bg-green-600 text-slate-50",
+        info: "info border-yellow-500 bg-yellow-500 text-slate-50",
       },
     },
     defaultVariants: {
diff --git a/constants/index.ts b/constants/index.ts
index adfdc1c..6e73119 100644
--- a/constants/index.ts
+++ b/constants/index.ts
@@ -14,6 +14,16 @@ export const sidebarLinks = [
     route: "/create-podcast",
     label: "Create Podcast",
   },
+  {
+    imgURL: "/icons/profile.svg",
+    route: "/profile",
+    label: "Profile",
+  },
+  {
+    imgURL: "/icons/chart.svg",
+    route: "/plans",
+    label: "Billing & Usage",
+  }
 ];
 
 export const voiceDetails = [
@@ -41,4 +51,81 @@ export const voiceDetails = [
     id: 6,
     name: "shimmer",
   },
+];
+
+// This block maps over the pricingPlans array to generate pricing plan cards.
+// Each card displays information based on whether the 'annual' state is true or false,
+// which toggles between showing monthly and annual prices.
+// Features and unavailable features are listed with icons indicating their availability.
+export const pricingPlans = [
+  {
+    // Name of the pricing plan.
+    name: "Free",
+    // Monthly price of the plan as a string.
+    monthlyPrice: "0",
+    // Annual price of the plan as a string, representing cost per month when billed annually.
+    annualPrice: "0",
+    // A short description for your pricing table
+    description:
+      "This plan is ideal for individual users and hobbyists who are looking for essential functionalities to get started and explore the platform.",
+    // Tailwind CSS classes for styling the card's background.
+    cardBgClass: "bg-[#0003] backdrop-blur-3xl",
+    // Tailwind CSS classes for styling the button within the card.
+    buttonClass: "text-white-1 bg-[#ffffff1a] hover:bg-[#ffffff0d] ",
+    // Array of features included in the plan.
+    features: [
+      "Create upto 5 Podcasts per month",
+      "Unlimited Listening",
+      "Text-to-speech",
+      "Thumbnail upload",
+      "1 AI voice model",
+    ],
+    // Array of features not available in the plan.
+    unavailableFeatures: [
+      "30 Podcasts per month",
+      "AI Thumbnail generation",
+      "AI voice model selection",
+    ],
+  },
+  {
+    name: "Pro",
+    monthlyPrice: "15",
+    annualPrice: "10",
+    description:
+      "If you're a small business or a startup, this plan is designed to cater to your needs. It offers a balance of essential features.",
+    cardBgClass: "bg-[#00000080] backdrop-blur-3xl",
+    buttonClass:
+      "text-black-1 bg-[#ffffff] hover:bg-[#ffffff0d] hover:text-white-1 ",
+    features: [
+      "Create upto 30 Podcasts per month",
+      "AI Thumbnail generation",
+      "AI voice model selection",
+      "Up to 6 AI voice models",
+      "Unlimited Listening",
+    ],
+    unavailableFeatures: [
+      "Unlimited Podcasts per month",
+      "Unlimited AI Thumbnail generation",
+    ],
+  },
+  {
+    name: "Enterprise",
+    monthlyPrice: "55",
+    annualPrice: "50",
+    description:
+      "Tailored for medium-sized businesses, this plan offers advanced tools and features to support your growing demands.",
+    cardBgClass: "bg-[#0003] backdrop-blur-3xl",
+    buttonClass: "text-white-1 bg-[#ffffff1a] hover:bg-[#ffffff0d] ",
+    features: [
+      "Unlimited Podcasts per month",
+      "Unlimited AI Thumbnail generation",
+      "AI voice model selection",
+      "Podcast boost",
+      "Gpt-3.5-turbo-16k model",
+      "Podcast stats and analytics",
+      "Unlimited Listening",
+    ],
+    // The third plan does not have any unavailable features, hence an empty array.
+    unavailableFeatures: [],
+  },
 ];
\ No newline at end of file
diff --git a/convex/_generated/api.d.ts b/convex/_generated/api.d.ts
index b4c38a1..df88ca7 100644
--- a/convex/_generated/api.d.ts
+++ b/convex/_generated/api.d.ts
@@ -14,12 +14,15 @@ import type {
   FilterApi,
   FunctionReference,
 } from "convex/server";
+import type * as crons from "../crons.js";
 import type * as files from "../files.js";
 import type * as http from "../http.js";
 import type * as openai from "../openai.js";
+import type * as payments from "../payments.js";
 import type * as podcasts from "../podcasts.js";
-import type * as tasks from "../tasks.js";
+import type * as stripe from "../stripe.js";
 import type * as users from "../users.js";
+import type * as util from "../util.js";
 
 /**
  * A utility for referencing Convex functions in your app's API.
@@ -30,12 +33,15 @@ import type * as users from "../users.js";
  * ```
  */
 declare const fullApi: ApiFromModules<{
+  crons: typeof crons;
   files: typeof files;
   http: typeof http;
   openai: typeof openai;
+  payments: typeof payments;
   podcasts: typeof podcasts;
-  tasks: typeof tasks;
+  stripe: typeof stripe;
   users: typeof users;
+  util: typeof util;
 }>;
 export declare const api: FilterApi<
   typeof fullApi,
diff --git a/convex/crons.ts b/convex/crons.ts
new file mode 100644
index 0000000..5479c61
--- /dev/null
+++ b/convex/crons.ts
@@ -0,0 +1,13 @@
+import { cronJobs } from "convex/server";
+import { internal } from "./_generated/api";
+
+const crons = cronJobs();
+
+// reset the totalPodcasts count every month
+crons.cron(
+  "reset total podcasts count of all users every month",
+  "0 0 1 * *", // every month
+  internal.users.resetTotalPodcastsCron
+);
+
+export default crons;
\ No newline at end of file
diff --git a/convex/http.ts b/convex/http.ts
index e6af649..0ff6f71 100644
--- a/convex/http.ts
+++ b/convex/http.ts
@@ -49,6 +49,29 @@ http.route({
   handler: handleClerkWebhook,
 });
 
+http.route({
+  path: "/stripe",
+  method: "POST",
+  handler: httpAction(async (ctx, request) => {
+    const signature: string = request.headers.get("stripe-signature") as string;
+
+    const result = await ctx.runAction(internal.stripe.fulfill, {
+      signature,
+      payload: await request.text(),
+    });
+
+    if (result.success) {
+      return new Response(null, {
+        status: 200,
+      });
+    } else {
+      return new Response("Webhook Error", {
+        status: 400,
+      });
+    }
+  }),
+});
+
 const validateRequest = async (
   req: Request
 ): Promise<WebhookEvent | undefined> => {
diff --git a/convex/openai.ts b/convex/openai.ts
index 60cd2b7..7b8791d 100644
--- a/convex/openai.ts
+++ b/convex/openai.ts
@@ -1,20 +1,93 @@
-import { action } from "./_generated/server";
+import { ActionCtx, action, internalMutation, internalQuery, query } from "./_generated/server";
 import { v } from "convex/values";
 
 import OpenAI from "openai";
 import { SpeechCreateParams } from "openai/resources/audio/speech.mjs";
+import { getUser, getUserById, isUserSubscribed } from "./users";
+import { useQuery } from "convex/react";
+import { api, internal } from "./_generated/api";
+import { rateLimit, checkRateLimit, resetRateLimit } from "@/lib/rateLimits";
+import { UserIdentity } from "convex/server";
+
+/**
+ * TODO: Add caching to user openai actions and check if the latest prompt has already been generated before
+ * if it has, return the same image or audio file
+ */
+
 
 const openai = new OpenAI({
   apiKey: process.env.OPENAI_API_KEY
 });
 
+const GENERATE_THUMBNAIL_ACTION = "generateThumbnailAction";
+const GENERATE_AUDIO_ACTION = "generateAudioAction";
+
+
+async function handleLimitations(ctx: ActionCtx, user: UserIdentity, voice: string | undefined) {
+  if (!user) {
+    throw new Error("User not authenticated");
+  }
+
+  // implement rate limiting
+  const rateLimit = await ctx.runMutation(internal.openai.handleRateLimits, {
+    userId: user.subject,
+    type: voice ? GENERATE_AUDIO_ACTION : GENERATE_THUMBNAIL_ACTION,
+  });
+
+  await checkPodcastCount(ctx);
+
+  // if no rate limit is returned, throw an error
+  if (!rateLimit) {
+    throw new Error("Rate limit exceeded, try again later");
+  }
+
+  if (!rateLimit.ok && rateLimit.retryAt) {
+    // add some jitter to the retry time to avoid thundering herd problem
+    const withJitter = rateLimit.retryAt + Math.random() * 10 * 1000;
+    const retryAt = new Date(withJitter).toLocaleTimeString(
+      // in IST timezone
+      "en-US",
+      { timeZone: "Asia/Kolkata" }
+    );
+    throw new Error("Rate limit exceeded, try after: " + retryAt + " (IST)");
+  }
+
+  // get user subscription
+  const { isSubscribed } = await ctx.runQuery(
+    internal.openai.getUserSubscription,
+    {}
+  );
+
+  // only allow users with a plan to generate thumbnails
+  if (!voice && !isSubscribed) {
+    throw new Error("User must have a subscription to generate thumbnails");
+  }
+
+  // only allow users with a plan to use other voice options than the default
+  if (voice && !isSubscribed && voice !== "alloy") {
+    throw new Error("User must have a subscription to use other voice options");
+  } else {
+    return isSubscribed;
+  }
+}
 
 export const generateAudioAction = action({
   args: { input: v.string(), voice: v.string() },
-  handler: async (_, { voice, input }) => {
+  handler: async (ctx, { voice, input }) => {
+
+    const user = await ctx.auth.getUserIdentity();
+
+    if (!user) {
+      throw new Error("User not authenticated");
+    }
+
+    const defaultVoice = "alloy" as SpeechCreateParams["voice"];
+
+    const isSubscribed = await handleLimitations(ctx, user, voice);
+
     const mp3 = await openai.audio.speech.create({
       model: "tts-1",
-      voice: voice as SpeechCreateParams["voice"],
+      voice: isSubscribed? voice as SpeechCreateParams["voice"] : defaultVoice,
       input,
     });
 
@@ -24,11 +97,101 @@ export const generateAudioAction = action({
   },
 });
 
+
+export const handleRateLimits = internalMutation({
+  args: { userId: v.string(), type: v.string() },
+  handler: async (ctx, args) => {
+
+    switch (args.type) {
+      case GENERATE_AUDIO_ACTION:
+        return await rateLimit(ctx, {
+         name: args.type,
+         key: args.userId,
+         throws: false,
+        });
+
+      case GENERATE_THUMBNAIL_ACTION:
+        return await rateLimit(ctx, {
+          name: args.type,
+          key: args.userId,
+          throws: false,
+        });
+      default:
+        return;
+    }
+  },
+});
+
+
+async function checkPodcastCount(ctx: ActionCtx) {
+
+  const user = await ctx.runQuery(api.users.getUser);
+
+  if (!user) {
+    throw new Error("User not found");
+  }
+
+  switch (user.plan?.toLowerCase()) {
+    case "free":
+      // check if user has generated more than 5 podcasts
+      if (user.totalPodcasts >= 5) {
+        throw new Error("Free users can only generate 5 podcasts per month");
+      }
+      return;
+    case "pro":
+      // check if user has generated more than 30 podcasts
+      if (user.totalPodcasts >= 30) {
+        throw new Error("Pro users can only generate 30 podcasts per month");
+      }
+      return;
+    case "enterprise":
+      // check if user has generated more than 100 podcasts
+      if (user.totalPodcasts >= 100) {
+        throw new Error("Enterprise users can only generate 100 podcasts per month");
+      }
+      return;
+    default:
+      // check if user has generated more than 5 podcasts
+      if (user.totalPodcasts >= 5) {
+        throw new Error("Free users can only generate 5 podcasts per month");
+      }
+      return;
+  }
+}
+
+// function to get user subscription details
+export const getUserSubscription = internalQuery({
+  args: {},
+  handler: async (ctx) => {
+
+    const identity = await ctx.auth.getUserIdentity();
+
+    const user = await getUserById(ctx, { clerkId: identity?.subject! });
+
+    if (!user) {
+      throw new Error("User not found");
+    }
+
+    return {
+      isSubscribed: await isUserSubscribed(ctx),
+      plan: user.plan,
+    };
+  },
+});
+
 export const generateThumbnailAction = action({
   args: { prompt: v.string() },
-  handler: async (_, { prompt }) => {
+  handler: async (ctx, { prompt }) => {
+    const user = await ctx.auth.getUserIdentity();
+
+    if (!user) {
+      throw new Error("User not authenticated");
+    }
+
+    await handleLimitations(ctx, user, undefined);
+
     const response = await openai.images.generate({
-      model: "dall-e-3",
+      model: "dall-e-2",
       prompt,
       size: "1024x1024",
       quality: "standard",
diff --git a/convex/payments.ts b/convex/payments.ts
new file mode 100644
index 0000000..231b871
--- /dev/null
+++ b/convex/payments.ts
@@ -0,0 +1,30 @@
+import { v } from "convex/values";
+import { internalMutation, query } from "./_generated/server";
+
+export const create = internalMutation({
+  handler: async (ctx) => {
+    return await ctx.db.insert("payments", {});
+  },
+});
+
+export const markPending = internalMutation({
+  args: { paymentId: v.id("payments"), stripeId: v.string() },
+  handler: async (ctx, { paymentId, stripeId }) => {
+    await ctx.db.patch(paymentId, { stripeId });
+  },
+});
+
+export const fulfill = internalMutation({
+  args: {
+    stripeId: v.string(),
+    customerId: v.string(),
+    userId: v.string(),
+   },
+  handler: async (ctx, { stripeId, customerId, userId }) => {
+    const { _id: paymentId } = (await ctx.db
+      .query("payments")
+      .withIndex("stripeId", (q) => q.eq("stripeId", stripeId))
+      .unique())!;
+    await ctx.db.patch(paymentId, {stripeId, customerId, userId});
+  },
+});
diff --git a/convex/podcasts.ts b/convex/podcasts.ts
index 7c4e432..7ab3458 100644
--- a/convex/podcasts.ts
+++ b/convex/podcasts.ts
@@ -1,6 +1,18 @@
 import { ConvexError, v } from "convex/values";
 
-import { mutation, query } from "./_generated/server";
+import { MutationCtx, mutation, query } from "./_generated/server";
+
+type User = {
+  _id: string;
+  email: string;
+  imageUrl: string;
+  clerkId: string;
+  name: string;
+  subscriptionId?: string;
+  endsOn?: number;
+  plan?: string;
+  totalPodcasts: number;
+};
 
 // create podcast mutation
 export const createPodcast = mutation({
@@ -33,7 +45,14 @@ export const createPodcast = mutation({
       throw new ConvexError("User not found");
     }
 
-    return await ctx.db.insert("podcasts", {
+    const isSubscribed =
+      user[0].subscriptionId && user[0].endsOn && user[0].endsOn > new Date().getTime();
+
+    const voiceType = isSubscribed ? args.voiceType : "alloy";
+
+    await handlePodcastSubscription(ctx, user[0]);
+
+    const newPodcast = await ctx.db.insert("podcasts", {
       audioStorageId: args.audioStorageId,
       user: user[0]._id,
       podcastTitle: args.podcastTitle,
@@ -45,14 +64,53 @@ export const createPodcast = mutation({
       authorId: user[0].clerkId,
       voicePrompt: args.voicePrompt,
       imagePrompt: args.imagePrompt,
-      voiceType: args.voiceType,
+      voiceType: voiceType,
       views: args.views,
       authorImageUrl: user[0].imageUrl,
       audioDuration: args.audioDuration,
     });
+
+    // update the totalPodcasts of the user
+    await ctx.db.patch(user[0]._id, {
+      totalPodcasts: user[0].totalPodcasts + 1,
+    });
+
+    return newPodcast;
   },
 });
 
+// function to handle the podcasts based on user subscription
+export const handlePodcastSubscription = async (ctx: MutationCtx,
+  user: User
+) => {
+
+  const plan = user.plan? user.plan : "FREE";
+
+  switch (plan.toUpperCase()) {
+    case "FREE":
+      if (user.totalPodcasts >= 5) {
+        throw new ConvexError("You have exceeded the limit of podcasts for this month");
+      }
+      break;
+    case "PRO":
+      if (user.totalPodcasts >= 30) {
+        throw new ConvexError("You have exceeded the limit of podcasts for this month");
+      }
+      break;
+    case "ENTERPRISE":
+      if (user.totalPodcasts >= 100) {
+        throw new ConvexError("You have exceeded the limit of podcasts for this month");
+      }
+      break;
+    default:
+      if (user.totalPodcasts >= 5) {
+        throw new ConvexError("You have exceeded the limit of podcasts for this month");
+      }
+      break;
+  }
+
+};
+
 // this mutation is required to generate the url after uploading the file to the storage.
 export const getUrl = mutation({
   args: {
diff --git a/convex/schema.ts b/convex/schema.ts
index fa16717..4e4849c 100644
--- a/convex/schema.ts
+++ b/convex/schema.ts
@@ -1,15 +1,17 @@
 import { defineSchema, defineTable } from "convex/server";
 import { v } from "convex/values";
+import { rateLimitTables } from "convex-helpers/server/rateLimit";
 
 export default defineSchema({
+  ...rateLimitTables,
   podcasts: defineTable({
-    user: v.id('users'),
+    user: v.id("users"),
     podcastTitle: v.string(),
     podcastDescription: v.string(),
     audioUrl: v.optional(v.string()),
-    audioStorageId: v.optional(v.id('_storage')),
+    audioStorageId: v.optional(v.id("_storage")),
     imageUrl: v.optional(v.string()),
-    imageStorageId: v.optional(v.id('_storage')),
+    imageStorageId: v.optional(v.id("_storage")),
     author: v.string(),
     authorId: v.string(),
     authorImageUrl: v.string(),
@@ -19,13 +21,26 @@ export default defineSchema({
     audioDuration: v.number(),
     views: v.number(),
   })
-    .searchIndex('search_author', { searchField: 'author' })
-    .searchIndex('search_title', { searchField: 'podcastTitle' })
-    .searchIndex('search_body', { searchField: 'podcastDescription' }),
+    .searchIndex("search_author", { searchField: "author" })
+    .searchIndex("search_title", { searchField: "podcastTitle" })
+    .searchIndex("search_body", { searchField: "podcastDescription" }),
   users: defineTable({
     email: v.string(),
     imageUrl: v.string(),
     clerkId: v.string(),
     name: v.string(),
+    subscriptionId: v.optional(v.string()),
+    customerId: v.optional(v.string()),
+    endsOn: v.optional(v.number()),
+    plan: v.optional(v.string()),
+    totalPodcasts: v.number(),
   })
-})
\ No newline at end of file
+    .index("by_clerkId", ["clerkId"])
+    .index("by_subscriptionId", ["subscriptionId"]),
+  payments: defineTable({
+    stripeId: v.optional(v.string()),
+    customerId: v.optional(v.string()),
+    userId: v.optional(v.string()),
+
+  }).index("stripeId", ["stripeId"]),
+});
\ No newline at end of file
diff --git a/convex/stripe.ts b/convex/stripe.ts
new file mode 100644
index 0000000..73494fe
--- /dev/null
+++ b/convex/stripe.ts
@@ -0,0 +1,281 @@
+"use node";
+
+import { v } from "convex/values";
+import { ActionCtx, action, internalAction, internalMutation, mutation } from "./_generated/server";
+import Stripe from "stripe";
+import { api, internal } from "./_generated/api";
+
+type Metadata = {
+  userId: string;
+};
+
+export const pay = action({
+  args: { plan: v.string() },
+  handler: async (ctx, args) => {
+    const user = await ctx.auth.getUserIdentity();
+
+    if (!user) {
+      throw new Error("You must be logged in to subscribe!");
+    }
+
+    if (!user.emailVerified) {
+      throw new Error("You must have a verified email to subscribe!");
+    }
+
+    if (!args.plan) {
+      throw new Error("You must provide a plan to subscribe to!");
+    }
+
+    const domain = process.env.HOSTING_URL ?? "http://localhost:3000";
+    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+      apiVersion: "2024-04-10",
+    });
+
+    let priceId = "";
+
+    switch (args.plan) {
+      case "Pro":
+        priceId = process.env.PRICE_ID_PRO!;
+        break;
+      case "Enterprise":
+        priceId = process.env.PRICE_ID_ENTERPRISE!;
+        break;
+      case "Pro-annual":
+        priceId = process.env.PRICE_ID_PRO_ANNUAL!;
+        break;
+      case "Enterprise-annual":
+        priceId = process.env.PRICE_ID_ENTERPRISE_ANNUAL!;
+        break;
+      default:
+        throw new Error("Invalid plan provided!");
+    }
+
+    const paymentId = await ctx.runMutation(internal.payments.create);
+    const session = await stripe.checkout.sessions.create({
+      ui_mode: "hosted",
+      line_items: [{ price: priceId, quantity: 1 }],
+      customer_email: user.email,
+      metadata: {
+        userId: user.subject,
+      },
+      mode: "subscription",
+      success_url: `${domain}/plans?session_id={CHECKOUT_SESSION_ID}`,
+      cancel_url: `${domain}`,
+    });
+
+    await ctx.runMutation(internal.payments.markPending, {
+      paymentId,
+      stripeId: session.id,
+    });
+    return session.url;
+  },
+});
+
+export const cancelSubscription = action({
+  args: { clerkId: v.string() },
+  handler: async (ctx, args) => {
+    const user = await ctx.auth.getUserIdentity();
+
+    if (!user) {
+      throw new Error("You must be logged in to cancel your subscription!");
+    }
+
+    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+      apiVersion: "2024-04-10",
+    });
+
+    const { subscriptionId } = await ctx.runQuery(
+      api.users.getSubscriptionByClerkId,
+      {
+        clerkId: user.subject,
+      }
+    );
+
+    if (!subscriptionId) {
+      throw new Error("No subscription found for this user!");
+    }
+
+    const subscription = await stripe.subscriptions.retrieve(subscriptionId);
+
+    if (subscription.status === "canceled") {
+      throw new Error("Subscription already canceled!");
+    }
+
+    await stripe.subscriptions.cancel(subscriptionId);
+
+    await ctx.runMutation(internal.users.updateSubscription, {
+      userId: user.subject,
+      subscriptionId: undefined,
+      endsOn: 0,
+      plan: "Free",
+    });
+
+    return { success: true };
+  },
+});
+
+export const createCustomerPortal = action({
+  args: {},
+  handler: async (ctx, args) => {
+    const user = await ctx.auth.getUserIdentity();
+
+    if (!user) {
+      throw new Error("You must be logged in to access the customer portal!");
+    }
+
+    const { customerId } = await ctx.runQuery(
+      api.users.getSubscriptionByClerkId,
+      {
+        clerkId: user.subject,
+      }
+    );
+
+    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+      apiVersion: "2024-04-10",
+    });
+
+    const session = await stripe.billingPortal.sessions.create({
+      customer: customerId!,
+      return_url:
+        process.env.HOSTING_URL ??
+        `http://localhost:3000/plans?session_id={BILLING_PORTAL_SESSION_ID}`,
+    });
+
+    return session.url;
+  },
+});
+
+async function getPlanNameFromProductId(productId: string) {
+  const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+    apiVersion: "2024-04-10",
+  });
+
+  const product = await stripe.products.retrieve(productId);
+
+  return product.name;
+}
+
+async function handleEvents(
+  stripe: Stripe,
+  ctx: ActionCtx,
+  event: Stripe.Event
+) {
+  const completedEvent = event.data.object as Stripe.Checkout.Session & {
+    metadata: Metadata;
+  };
+
+  const updateEvent = event.data.object as Stripe.Subscription & {
+    metadata: Metadata;
+  };
+
+  let subscriptionId = completedEvent.subscription as string | undefined;
+  let subscription = {} as Stripe.Subscription;
+
+  if (subscriptionId) {
+    subscription = await stripe.subscriptions.retrieve(
+      completedEvent.subscription as string
+    );
+  }
+
+  try {
+
+    switch (event.type) {
+      case "checkout.session.completed":
+        const stripeId = (event.data.object as { id: string }).id;
+        const userId = completedEvent.metadata.userId;
+        const customerId = completedEvent.customer as string;
+
+        await ctx.runMutation(internal.users.updateSubscription, {
+          userId,
+          subscriptionId: subscription.id,
+          endsOn: subscription.current_period_end * 1000,
+          plan: await getPlanNameFromProductId(
+            subscription.items.data[0]?.price.product as string
+          ),
+          customerId: customerId,
+        });
+        await ctx.runMutation(internal.payments.fulfill, { stripeId, customerId, userId});
+        break;
+
+      case "invoice.payment_succeeded":
+        await ctx.runMutation(internal.users.updateSubscriptionBySubId, {
+          subscriptionId: subscription.items.data[0]?.price.id,
+          endsOn: subscription.current_period_end * 1000,
+          customerId: subscription.customer as string,
+          plan: await getPlanNameFromProductId(
+            subscription.items.data[0]?.price.product as string
+          ),
+        });
+        break;
+
+      case "customer.subscription.updated":
+        await ctx.runMutation(internal.users.updateSubscriptionBySubId, {
+          subscriptionId: updateEvent.id,
+          endsOn: updateEvent.current_period_end * 1000, // the subscription ends on the current_period_end date regardless of the cancel_at date
+          customerId: updateEvent.customer as string,
+          plan: await getPlanNameFromProductId(
+            updateEvent.items.data[0].price.product as string
+          ),
+        });
+        // schedule a function to change the user's plan to "Free" after the cancel_at date
+        if (updateEvent.cancel_at) {
+          await ctx.scheduler.runAt(
+            new Date(updateEvent.cancel_at * 1000),
+            internal.users.updateSubscriptionBySubId,
+            {
+              subscriptionId: updateEvent.id,
+              endsOn: 0,
+              customerId: updateEvent.customer as string,
+              plan: "Free",
+            }
+          );
+        }
+        /**
+         * TODO: Add cancel scheduled task if the subscription is reactivated before the cancel_at date
+         */
+        break;
+      case "customer.subscription.deleted":
+        await ctx.runMutation(internal.users.updateSubscriptionBySubId, {
+          subscriptionId: updateEvent.id,
+          endsOn: updateEvent.current_period_end * 1000,
+          customerId: completedEvent.customer as string,
+        });
+        break;
+
+      /**
+       * TODO: Add "customer.updated" event to update the user's (billing) email in the database
+       */
+
+      default:
+        break;
+    }
+    return { success: true };
+  } catch (error) {
+    console.error("Error processing event: ", error);
+    return { success: false, error: (error as { message: string }).message };
+  }
+}
+
+export const fulfill = internalAction({
+  args: { signature: v.string(), payload: v.string() },
+  handler: async (ctx, args) => {
+    const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
+      apiVersion: "2024-04-10",
+    });
+
+    const webhookSecret = process.env.STRIPE_WEBHOOKS_SECRET as string;
+
+    try {
+      const event = stripe.webhooks.constructEvent(
+        args.payload,
+        args.signature,
+        webhookSecret
+      );
+
+      return await handleEvents(stripe, ctx, event);
+    } catch (err) {
+      console.error(err);
+      return { success: false, error: (err as { message: string }).message };
+    }
+  },
+});
diff --git a/convex/tasks.ts b/convex/tasks.ts
deleted file mode 100644
index d8186b8..0000000
--- a/convex/tasks.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { query } from "./_generated/server";
-
-export const get = query({
-  args: {},
-  handler: async (ctx) => {
-    return await ctx.db.query("tasks").collect();
-  },
-});
\ No newline at end of file
diff --git a/convex/users.ts b/convex/users.ts
index 0debee5..5c3ea56 100644
--- a/convex/users.ts
+++ b/convex/users.ts
@@ -1,6 +1,36 @@
 import { ConvexError, v } from "convex/values";
 
-import { internalMutation, query } from "./_generated/server";
+import { MutationCtx, QueryCtx, internalMutation, query } from "./_generated/server";
+import { getUserId } from "./util";
+import { internal } from "./_generated/api";
+
+
+export const getUser = query({
+  args: {},
+  handler: async (ctx, args) => {
+    const userId = await getUserId(ctx);
+
+    if (!userId) {
+      return undefined;
+    }
+
+    return getFullUser(ctx, userId);
+  },
+});
+
+// reset the totalPodcasts count every month
+export const resetTotalPodcastsCron = internalMutation({
+  args: {},
+  handler: async (ctx) => {
+    const users = await ctx.db.query("users").collect();
+
+    await Promise.all(
+      users.map(async (u) => {
+        await ctx.db.patch(u._id, { totalPodcasts: 0 });
+      })
+    );
+  },
+});
 
 export const getUserById = query({
   args: { clerkId: v.string() },
@@ -18,6 +48,130 @@ export const getUserById = query({
   },
 });
 
+export function getFullUser(ctx: QueryCtx | MutationCtx, userId: string) {
+  return ctx.db
+    .query("users")
+    .withIndex("by_clerkId", (q) => q.eq("clerkId", userId))
+    .first();
+}
+
+export const isUserSubscribed = async (ctx: QueryCtx | MutationCtx) => {
+  const userId = await getUserId(ctx);
+
+  if (!userId) {
+    return false;
+  }
+
+  const userToCheck = await getFullUser(ctx, userId );
+
+  return (userToCheck?.endsOn ?? 0) > Date.now();
+};
+
+export const getSubscriptionByClerkId = query({
+  args: { clerkId: v.string() },
+  handler: async (ctx, args) => {
+    const user = await ctx.db
+      .query("users")
+      .filter((q) => q.eq(q.field("clerkId"), args.clerkId))
+      .first();
+
+    if (!user) {
+      throw new ConvexError("User not found");
+    }
+
+    return {
+      subscriptionId: user.subscriptionId,
+      endsOn: user.endsOn,
+      plan: user.plan,
+      customerId: user.customerId,
+    };
+  },
+});
+
+// export const getUserPlan = query({
+//   args: {},
+//   handler: async (ctx, args) => {
+//     const userId = await getUserId(ctx);
+
+//     if (!userId) {
+//       return undefined;
+//     }
+
+//     const user = await getFullUser(ctx, userId);
+
+//     return user?.plan;
+//   },
+// });
+
+export const getTotalPodcastsOfUser = query({
+  args: { clerkId: v.string() },
+  handler: async (ctx, args) => {
+    const user = await ctx.db
+      .query("users")
+      .filter((q) => q.eq(q.field("clerkId"), args.clerkId))
+      .unique();
+
+    if (!user) {
+      throw new ConvexError("User not found");
+    }
+
+    return user.totalPodcasts;
+  },
+});
+
+
+export const updateSubscription = internalMutation({
+  args: {
+    subscriptionId: v.optional(v.string()),
+    userId: v.string(),
+    endsOn: v.number(),
+    plan: v.string(),
+    customerId: v.optional(v.string())
+  },
+  handler: async (ctx, args) => {
+    const user = await getFullUser(ctx, args.userId);
+
+    if (!user) {
+      throw new Error("no user found with that user id");
+    }
+
+    await ctx.db.patch(user._id, {
+      subscriptionId: args.subscriptionId,
+      endsOn: args.endsOn,
+      plan: args.plan,
+      customerId: args.customerId,
+    });
+  },
+});
+
+export const updateSubscriptionBySubId = internalMutation({
+  args: {
+    subscriptionId: v.optional(v.string()),
+    endsOn: v.optional(v.number()),
+    customerId: v.optional(v.string()),
+    plan: v.optional(v.string()),
+  },
+  handler: async (ctx, args) => {
+    const user = await ctx.db
+      .query("users")
+      .withIndex("by_subscriptionId", (q) =>
+        q.eq("subscriptionId", args.subscriptionId)
+      )
+      .first();
+
+    if (!user) {
+      throw new Error("no user found with that user id");
+    }
+
+    await ctx.db.patch(user._id, {
+      subscriptionId: args.subscriptionId,
+      endsOn: args.endsOn,
+      customerId: args.customerId,
+      plan: args.plan,
+    });
+  },
+});
+
 // this query is used to get the top user by podcast count. first the podcast is sorted by views and then the user is sorted by total podcasts, so the user with the most podcasts will be at the top.
 export const getTopUserByPodcastCount = query({
   args: {},
@@ -61,6 +215,7 @@ export const createUser = internalMutation({
       email: args.email,
       imageUrl: args.imageUrl,
       name: args.name,
+      totalPodcasts: 0,
     });
   },
 });
diff --git a/convex/util.ts b/convex/util.ts
new file mode 100644
index 0000000..303290c
--- /dev/null
+++ b/convex/util.ts
@@ -0,0 +1,9 @@
+import { ActionCtx, MutationCtx, QueryCtx } from "./_generated/server";
+
+export const getUserId = async (ctx: QueryCtx | MutationCtx | ActionCtx) => {
+  return (await ctx.auth.getUserIdentity())?.subject;
+};
+
+export const getUser = async (ctx: QueryCtx | MutationCtx | ActionCtx) => {
+  return await ctx.auth.getUserIdentity();
+};
diff --git a/hooks/useIsSubscribed.ts b/hooks/useIsSubscribed.ts
new file mode 100644
index 0000000..cabcc8d
--- /dev/null
+++ b/hooks/useIsSubscribed.ts
@@ -0,0 +1,36 @@
+import { useQuery } from "convex/react";
+import { api } from "../convex/_generated/api";
+import { useIsFetching } from "@/providers/IsFetchingProvider";
+import { useEffect } from "react";
+
+export function useIsSubscribed(id: string) {
+
+  const { setIsFetching } = useIsFetching();
+
+  const user = useQuery(api.users.getSubscriptionByClerkId, { clerkId: id });
+
+  useEffect(() => {
+    if (!user) return;
+    setIsFetching(false);
+  }, [user]);
+
+  if (!user || !user.endsOn) return false;
+
+  return user?.endsOn > Date.now();
+}
+
+export function useGetPlan(id: string) {
+
+  const { setIsFetching } = useIsFetching();
+
+  const user = useQuery(api.users.getSubscriptionByClerkId, { clerkId: id });
+
+  useEffect(() => {
+    if (!user) return;
+    setIsFetching(false);
+  }, [user]);
+
+  if (!user || !user.plan) return "free";
+
+  return user;
+}
\ No newline at end of file
diff --git a/lib/rateLimits.ts b/lib/rateLimits.ts
new file mode 100644
index 0000000..0abe7a3
--- /dev/null
+++ b/lib/rateLimits.ts
@@ -0,0 +1,16 @@
+import { defineRateLimits } from "convex-helpers/server/rateLimit";
+
+const SECOND = 1000; // ms
+const MINUTE = 60 * SECOND;
+const HOUR = 60 * MINUTE;
+const DAY = 24 * HOUR;
+
+export const { checkRateLimit, rateLimit, resetRateLimit } = defineRateLimits({
+  // A per-user limit, allowing one every ~6 seconds.
+  // Allows up to 3 in quick succession if they haven't sent many recently.
+  generateAudioAction: { kind: "fixed window", rate: 3, period: MINUTE*2 },
+  generateThumbnailAction: { kind: "fixed window", rate: 3, period: MINUTE*2 },
+  createPodcast: { kind: "fixed window", rate: 3, period: MINUTE*2 },
+  uploadFile: { kind: "fixed window", rate: 3, period: MINUTE*2 },
+
+});
diff --git a/package-lock.json b/package-lock.json
index 7ec0ed5..9f8873b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,6 +20,7 @@
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "convex": "^1.12.0",
+        "convex-helpers": "^0.1.43",
         "embla-carousel": "^8.1.3",
         "embla-carousel-autoplay": "^8.1.3",
         "embla-carousel-react": "^8.1.3",
@@ -29,6 +30,7 @@
         "react": "^18",
         "react-dom": "^18",
         "react-hook-form": "^7.51.5",
+        "stripe": "^15.12.0",
         "svix": "^1.24.0",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
@@ -2187,7 +2189,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -2399,6 +2400,28 @@
         }
       }
     },
+    "node_modules/convex-helpers": {
+      "version": "0.1.43",
+      "resolved": "https://registry.npmjs.org/convex-helpers/-/convex-helpers-0.1.43.tgz",
+      "integrity": "sha512-8Mka2+7b8/gN8Dexbk9c4iPaolBxl0pSTrQIN4swyq8wunMhtTJwoTEk79/VwQpUrEaqnmqS357ZMQWVluGv/A==",
+      "peerDependencies": {
+        "convex": "^1.12.0",
+        "hono": "^4.0.5",
+        "react": "^17.0.2 || ^18.0.0",
+        "zod": "^3.22.4"
+      },
+      "peerDependenciesMeta": {
+        "hono": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "zod": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cookie": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -2526,7 +2549,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -2741,7 +2763,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -2753,7 +2774,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -3556,7 +3576,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -3722,7 +3741,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -3763,7 +3781,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -3775,7 +3792,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -3787,7 +3803,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -4762,7 +4777,6 @@
       "version": "1.13.1",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
       "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5252,6 +5266,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/qs": {
+      "version": "6.12.1",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz",
+      "integrity": "sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==",
+      "dependencies": {
+        "side-channel": "^1.0.6"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/querystringify": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
@@ -5630,7 +5658,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -5681,7 +5708,6 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz",
       "integrity": "sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.7",
         "es-errors": "^1.3.0",
@@ -5948,6 +5974,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stripe": {
+      "version": "15.12.0",
+      "resolved": "https://registry.npmjs.org/stripe/-/stripe-15.12.0.tgz",
+      "integrity": "sha512-slTbYS1WhRJXVB8YXU8fgHizkUrM9KJyrw4Dd8pLEwzKHYyQTIE46EePC2MVbSDZdE24o1GdNtzmJV4PrPpmJA==",
+      "dependencies": {
+        "@types/node": ">=8.1.0",
+        "qs": "^6.11.0"
+      },
+      "engines": {
+        "node": ">=12.*"
+      }
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
diff --git a/package.json b/package.json
index 3aca1cd..001fdc8 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,9 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "stripe:listen": "stripe listen --forward-to https://youthful-seahorse-517.convex.site/stripe",
+    "stripe:trigger": "stripe trigger payment_intent.succeeded"
   },
   "dependencies": {
     "@clerk/nextjs": "^5.1.2",
@@ -21,6 +23,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "convex": "^1.12.0",
+    "convex-helpers": "^0.1.43",
     "embla-carousel": "^8.1.3",
     "embla-carousel-autoplay": "^8.1.3",
     "embla-carousel-react": "^8.1.3",
@@ -30,6 +33,7 @@
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.5",
+    "stripe": "^15.12.0",
     "svix": "^1.24.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
diff --git a/providers/IsFetchingProvider.tsx b/providers/IsFetchingProvider.tsx
new file mode 100644
index 0000000..6047f5b
--- /dev/null
+++ b/providers/IsFetchingProvider.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import { useContext, createContext, useState, useEffect } from "react";
+import { IsFetchingContextType } from "@/types";
+
+// create a context for the isFetching state and a function to update it when the isSubscribed hook is called
+const IsFetchingContext = createContext<IsFetchingContextType | undefined>(undefined);
+
+// create a provider to wrap the app in that will provide the isFetching state and the function to update it
+const IsFetchingProvider = ({ children }: { children: React.ReactNode }) => {
+  const [isFetching, setIsFetching] = useState<boolean>(true);
+
+  return (
+    <IsFetchingContext.Provider value={{ isFetching, setIsFetching }}>
+      {children}
+    </IsFetchingContext.Provider>
+  );
+};
+
+// create a hook to use the isFetching state and the function to update it
+export const useIsFetching = () => {
+  const context = useContext(IsFetchingContext);
+
+  if (!context) {
+    throw new Error("useIsFetching must be used within an IsFetchingProvider");
+  }
+
+  return context;
+};
+
+export default IsFetchingProvider;
\ No newline at end of file
diff --git a/public/icons/chart.svg b/public/icons/chart.svg
new file mode 100644
index 0000000..22e0f10
--- /dev/null
+++ b/public/icons/chart.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2 22H22" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.75 4V22H14.25V4C14.25 2.9 13.8 2 12.45 2H11.55C10.2 2 9.75 2.9 9.75 4Z" stroke="#ffffffb8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 10V22H7V10C7 8.9 6.6 8 5.4 8H4.6C3.4 8 3 8.9 3 10Z" stroke="#ffffffb8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M17 15V22H21V15C21 13.9 20.6 13 19.4 13H18.6C17.4 13 17 13.9 17 15Z" stroke="#ffffffb8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/public/icons/premium.svg b/public/icons/premium.svg
new file mode 100644
index 0000000..18b9f46
--- /dev/null
+++ b/public/icons/premium.svg
@@ -0,0 +1,249 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="100%" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
+<path fill="#FFC800" opacity="1.000000" stroke="none" 
+	d="
+M1.000000,275.000000 
+	C1.000000,263.312439 1.000000,251.624878 1.299991,239.806122 
+	C2.040546,239.198608 2.696565,238.796371 2.889626,238.234940 
+	C6.221469,228.545822 7.487028,218.647766 7.108484,208.339890 
+	C6.461058,190.710251 12.917260,175.375458 23.760330,161.709244 
+	C24.413853,160.885559 24.736431,159.719406 24.973616,158.659058 
+	C26.031681,153.928894 26.748426,149.108078 28.052544,144.449936 
+	C32.080299,130.063293 40.514896,118.455627 51.184490,108.247040 
+	C54.288979,105.276688 57.846836,102.249741 59.611519,98.502205 
+	C66.881226,83.064026 77.830414,71.295311 92.530602,62.804905 
+	C97.254669,60.076420 102.893585,57.925331 106.199028,53.926998 
+	C118.438660,39.121693 133.687515,29.890753 152.350983,25.982901 
+	C155.475525,25.328665 158.888931,25.145887 161.614883,23.700487 
+	C166.157242,21.291956 170.014786,17.577917 174.580704,15.230540 
+	C186.666550,9.017099 199.598740,5.800999 213.231613,7.095716 
+	C222.194275,7.946904 230.261383,4.870457 238.579346,2.702610 
+	C238.849152,2.632293 238.865509,1.589478 239.000000,1.000001 
+	C244.688049,1.000000 250.376099,1.000000 256.532166,1.468657 
+	C257.006500,22.919964 257.012848,43.902611 256.579773,65.014099 
+	C226.424103,65.693169 198.011246,71.894096 171.464935,85.446198 
+	C84.269707,129.960037 43.761395,228.012756 76.321060,320.276215 
+	C99.163452,385.004089 145.477692,426.066498 212.128204,443.038544 
+	C226.665100,446.740234 242.033813,447.175293 257.014648,449.576263 
+	C257.006592,471.025146 257.003296,492.012573 257.000000,513.000000 
+	C251.311966,513.000000 245.623917,513.000000 239.804779,512.699585 
+	C239.336899,512.031372 239.067856,511.467804 238.653427,511.324371 
+	C228.986511,507.979095 219.135590,506.496857 208.809662,506.882324 
+	C192.516098,507.490570 177.873688,502.314667 164.861328,492.453125 
+	C162.987961,491.033356 160.806519,489.382019 158.614502,489.120239 
+	C138.225830,486.684998 121.392105,477.434784 108.034798,462.198608 
+	C104.550179,458.223816 100.860886,455.221008 96.296844,453.069519 
+	C81.249214,445.976135 70.318512,434.655243 62.043056,420.435974 
+	C59.223331,415.590973 56.785156,409.965027 52.643898,406.549500 
+	C38.416046,394.815155 30.179274,379.848053 25.997572,362.259308 
+	C25.186951,358.849731 24.958853,355.143646 23.418394,352.103088 
+	C21.168251,347.661743 17.556080,343.915466 15.261963,339.490540 
+	C8.825289,327.075409 5.766423,313.761597 7.103222,299.791290 
+	C7.932322,291.126709 4.616755,283.453705 2.702770,275.421051 
+	C2.640629,275.160278 1.589893,275.135040 1.000000,275.000000 
+z"/>
+<path fill="#FFA400" opacity="1.000000" stroke="none" 
+	d="
+M257.467957,513.000000 
+	C257.003296,492.012573 257.006592,471.025146 257.019531,449.463531 
+	C257.029205,448.889343 256.972900,448.670868 257.421661,448.783264 
+	C272.829529,447.030396 288.166656,446.679749 302.686707,443.055511 
+	C401.325836,418.434692 463.111053,324.947937 445.786224,224.832382 
+	C433.763672,155.357086 393.378021,107.012825 328.778015,79.165565 
+	C305.988159,69.341499 281.883057,64.884827 257.001312,65.219757 
+	C257.029144,65.110512 257.019196,64.885262 257.019196,64.885262 
+	C257.012848,43.902611 257.006500,22.919964 257.000061,1.468657 
+	C262.688049,1.000000 268.376068,1.000000 274.201111,1.304223 
+	C274.821045,2.042484 275.231873,2.677824 275.797760,2.880620 
+	C285.646210,6.410147 295.771851,7.351601 306.235901,7.121783 
+	C322.007538,6.775396 336.215271,11.904496 348.904602,21.312145 
+	C350.919464,22.805933 353.196838,24.214380 355.572510,24.890837 
+	C359.294342,25.950600 363.296692,26.026907 367.016785,27.091103 
+	C381.596130,31.261782 394.344604,38.683876 404.413177,50.076820 
+	C408.036377,54.176640 411.502930,57.924355 416.606201,60.306309 
+	C433.542389,68.211182 445.776489,80.927299 454.042267,97.665588 
+	C455.742249,101.108040 457.908295,104.747704 460.827972,107.088501 
+	C475.605225,118.935928 484.259644,134.246170 488.048187,152.589157 
+	C488.979797,157.099548 489.380402,161.717285 492.836853,165.482849 
+	C495.325409,168.193985 497.217133,171.552979 498.938690,174.850815 
+	C506.200897,188.762558 507.345398,203.734863 507.268005,219.161774 
+	C507.234985,225.746033 510.041809,232.346390 511.625854,238.923172 
+	C511.656799,239.051636 512.523315,238.978882 513.000000,239.000000 
+	C513.000000,250.687561 513.000000,262.375122 512.696411,274.199677 
+	C511.958344,274.819519 511.324493,275.229980 511.118988,275.795959 
+	C507.483673,285.807037 506.713348,296.132507 506.885284,306.748810 
+	C507.161926,323.831268 500.983948,338.831909 490.410919,352.121704 
+	C489.745148,352.958496 489.273193,354.060455 489.040680,355.111938 
+	C487.957764,360.008545 487.316925,365.025604 485.920959,369.825989 
+	C481.799347,383.999268 473.523773,395.567932 462.935455,405.671112 
+	C459.812622,408.650909 456.210724,411.670776 454.440430,415.431213 
+	C447.156372,430.903442 436.185455,442.686920 421.468597,451.227417 
+	C416.452484,454.138397 410.598511,456.592896 407.043335,460.854401 
+	C394.919495,475.386780 379.813782,484.253387 361.465485,488.039429 
+	C358.341888,488.683929 354.963287,488.981018 352.230927,490.433075 
+	C347.664886,492.859558 343.722290,496.453552 339.168976,498.910645 
+	C325.158478,506.471100 309.931000,507.312042 294.348267,507.265259 
+	C287.924561,507.245941 281.490417,510.041687 275.077789,511.625092 
+	C274.946686,511.657440 275.021332,512.523132 275.000000,513.000000 
+	C269.311951,513.000000 263.623932,513.000000 257.467957,513.000000 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+	d="
+M513.000000,238.531342 
+	C512.523315,238.978882 511.656799,239.051636 511.625854,238.923172 
+	C510.041809,232.346390 507.234985,225.746033 507.268005,219.161774 
+	C507.345398,203.734863 506.200897,188.762558 498.938690,174.850815 
+	C497.217133,171.552979 495.325409,168.193985 492.836853,165.482849 
+	C489.380402,161.717285 488.979797,157.099548 488.048187,152.589157 
+	C484.259644,134.246170 475.605225,118.935928 460.827972,107.088501 
+	C457.908295,104.747704 455.742249,101.108040 454.042267,97.665588 
+	C445.776489,80.927299 433.542389,68.211182 416.606201,60.306309 
+	C411.502930,57.924355 408.036377,54.176640 404.413177,50.076820 
+	C394.344604,38.683876 381.596130,31.261782 367.016785,27.091103 
+	C363.296692,26.026907 359.294342,25.950600 355.572510,24.890837 
+	C353.196838,24.214380 350.919464,22.805933 348.904602,21.312145 
+	C336.215271,11.904496 322.007538,6.775396 306.235901,7.121783 
+	C295.771851,7.351601 285.646210,6.410147 275.797760,2.880620 
+	C275.231873,2.677824 274.821045,2.042484 274.669037,1.304223 
+	C354.260376,1.000000 433.520752,1.000000 513.000000,1.000000 
+	C513.000000,80.020760 513.000000,159.041718 513.000000,238.531342 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+	d="
+M1.000000,275.468658 
+	C1.589893,275.135040 2.640629,275.160278 2.702770,275.421051 
+	C4.616755,283.453705 7.932322,291.126709 7.103222,299.791290 
+	C5.766423,313.761597 8.825289,327.075409 15.261963,339.490540 
+	C17.556080,343.915466 21.168251,347.661743 23.418394,352.103088 
+	C24.958853,355.143646 25.186951,358.849731 25.997572,362.259308 
+	C30.179274,379.848053 38.416046,394.815155 52.643898,406.549500 
+	C56.785156,409.965027 59.223331,415.590973 62.043056,420.435974 
+	C70.318512,434.655243 81.249214,445.976135 96.296844,453.069519 
+	C100.860886,455.221008 104.550179,458.223816 108.034798,462.198608 
+	C121.392105,477.434784 138.225830,486.684998 158.614502,489.120239 
+	C160.806519,489.382019 162.987961,491.033356 164.861328,492.453125 
+	C177.873688,502.314667 192.516098,507.490570 208.809662,506.882324 
+	C219.135590,506.496857 228.986511,507.979095 238.653427,511.324371 
+	C239.067856,511.467804 239.336899,512.031372 239.336823,512.699585 
+	C159.739624,513.000000 80.479256,513.000000 1.000000,513.000000 
+	C1.000000,433.979248 1.000000,354.958282 1.000000,275.468658 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+	d="
+M275.468628,513.000000 
+	C275.021332,512.523132 274.946686,511.657440 275.077789,511.625092 
+	C281.490417,510.041687 287.924561,507.245941 294.348267,507.265259 
+	C309.931000,507.312042 325.158478,506.471100 339.168976,498.910645 
+	C343.722290,496.453552 347.664886,492.859558 352.230927,490.433075 
+	C354.963287,488.981018 358.341888,488.683929 361.465485,488.039429 
+	C379.813782,484.253387 394.919495,475.386780 407.043335,460.854401 
+	C410.598511,456.592896 416.452484,454.138397 421.468597,451.227417 
+	C436.185455,442.686920 447.156372,430.903442 454.440430,415.431213 
+	C456.210724,411.670776 459.812622,408.650909 462.935455,405.671112 
+	C473.523773,395.567932 481.799347,383.999268 485.920959,369.825989 
+	C487.316925,365.025604 487.957764,360.008545 489.040680,355.111938 
+	C489.273193,354.060455 489.745148,352.958496 490.410919,352.121704 
+	C500.983948,338.831909 507.161926,323.831268 506.885284,306.748810 
+	C506.713348,296.132507 507.483673,285.807037 511.118988,275.795959 
+	C511.324493,275.229980 511.958344,274.819519 512.696411,274.668335 
+	C513.000000,354.260376 513.000000,433.520752 513.000000,513.000000 
+	C433.979248,513.000000 354.958282,513.000000 275.468628,513.000000 
+z"/>
+<path fill="#000000" opacity="1.000000" stroke="none" 
+	d="
+M238.531342,1.000001 
+	C238.865509,1.589478 238.849152,2.632293 238.579346,2.702610 
+	C230.261383,4.870457 222.194275,7.946904 213.231613,7.095716 
+	C199.598740,5.800999 186.666550,9.017099 174.580704,15.230540 
+	C170.014786,17.577917 166.157242,21.291956 161.614883,23.700487 
+	C158.888931,25.145887 155.475525,25.328665 152.350983,25.982901 
+	C133.687515,29.890753 118.438660,39.121693 106.199028,53.926998 
+	C102.893585,57.925331 97.254669,60.076420 92.530602,62.804905 
+	C77.830414,71.295311 66.881226,83.064026 59.611519,98.502205 
+	C57.846836,102.249741 54.288979,105.276688 51.184490,108.247040 
+	C40.514896,118.455627 32.080299,130.063293 28.052544,144.449936 
+	C26.748426,149.108078 26.031681,153.928894 24.973616,158.659058 
+	C24.736431,159.719406 24.413853,160.885559 23.760330,161.709244 
+	C12.917260,175.375458 6.461058,190.710251 7.108484,208.339890 
+	C7.487028,218.647766 6.221469,228.545822 2.889626,238.234940 
+	C2.696565,238.796371 2.040546,239.198608 1.299991,239.337463 
+	C1.000000,159.739624 1.000000,80.479240 1.000000,1.000000 
+	C80.020760,1.000000 159.041718,1.000000 238.531342,1.000001 
+z"/>
+<path fill="#1A4F57" opacity="1.000000" stroke="none" 
+	d="
+M257.024323,449.002075 
+	C242.033813,447.175293 226.665100,446.740234 212.128204,443.038544 
+	C145.477692,426.066498 99.163452,385.004089 76.321060,320.276215 
+	C43.761395,228.012756 84.269707,129.960037 171.464935,85.446198 
+	C198.011246,71.894096 226.424103,65.693169 256.579773,65.014099 
+	C257.019196,64.885262 257.029144,65.110512 257.011688,65.667656 
+	C257.057281,92.540009 257.120300,118.855217 257.150635,145.351807 
+	C257.117920,145.533188 256.995239,145.880798 256.591064,145.830933 
+	C250.034805,145.972580 246.146027,149.456894 243.149826,154.476059 
+	C230.791138,175.179062 218.367966,195.843582 205.957352,216.515533 
+	C205.039078,218.045059 204.032272,219.521423 202.945160,221.211349 
+	C186.160309,212.807602 169.672302,204.597107 153.229340,196.297363 
+	C146.908951,193.107101 140.757034,192.618759 135.028519,197.312256 
+	C129.449066,201.883575 128.796173,207.900787 130.490250,214.541336 
+	C133.735153,227.260834 136.853577,240.012558 140.043411,252.746170 
+	C147.311157,281.758392 154.553970,310.776947 161.888336,339.772339 
+	C163.933258,347.856598 168.835938,352.141510 176.600296,352.167053 
+	C203.397751,352.255219 230.195908,352.124390 257.071289,352.248718 
+	C257.148743,352.420532 257.225708,352.789490 257.170898,353.268555 
+	C257.068359,385.388672 257.020630,417.029785 256.972900,448.670868 
+	C256.972900,448.670868 257.029205,448.889343 257.024323,449.002075 
+z"/>
+<path fill="#013540" opacity="1.000000" stroke="none" 
+	d="
+M257.183350,145.170425 
+	C257.120300,118.855217 257.057281,92.540009 256.983856,65.776901 
+	C281.883057,64.884827 305.988159,69.341499 328.778015,79.165565 
+	C393.378021,107.012825 433.763672,155.357086 445.786224,224.832382 
+	C463.111053,324.947937 401.325836,418.434692 302.686707,443.055511 
+	C288.166656,446.679749 272.829529,447.030396 257.421631,448.783264 
+	C257.020630,417.029785 257.068359,385.388672 257.612793,353.190247 
+	C283.761383,352.754517 309.413361,352.969910 335.065063,352.945557 
+	C343.730438,352.937347 350.259674,348.227966 352.091675,340.585205 
+	C354.756531,329.468201 357.689972,318.415741 360.476685,307.327637 
+	C368.271881,276.311188 376.045227,245.289246 383.839783,214.272629 
+	C385.512054,207.618103 384.548706,201.635818 379.001190,197.138153 
+	C373.266541,192.488754 367.070679,192.938248 360.795959,196.142410 
+	C355.183807,199.008255 349.558258,201.848328 343.920807,204.664124 
+	C333.007477,210.115204 322.081604,215.541229 310.986084,221.064651 
+	C298.260010,199.878952 285.634003,179.162415 273.355957,158.241699 
+	C269.507477,151.684204 265.451447,145.980728 257.183350,145.170425 
+z"/>
+<path fill="#FEC801" opacity="1.000000" stroke="none" 
+	d="
+M257.150635,145.351807 
+	C265.451447,145.980728 269.507477,151.684204 273.355957,158.241699 
+	C285.634003,179.162415 298.260010,199.878952 310.986084,221.064651 
+	C322.081604,215.541229 333.007477,210.115204 343.920807,204.664124 
+	C349.558258,201.848328 355.183807,199.008255 360.795959,196.142410 
+	C367.070679,192.938248 373.266541,192.488754 379.001190,197.138153 
+	C384.548706,201.635818 385.512054,207.618103 383.839783,214.272629 
+	C376.045227,245.289246 368.271881,276.311188 360.476685,307.327637 
+	C357.689972,318.415741 354.756531,329.468201 352.091675,340.585205 
+	C350.259674,348.227966 343.730438,352.937347 335.065063,352.945557 
+	C309.413361,352.969910 283.761383,352.754517 257.667603,352.711182 
+	C257.225708,352.789490 257.148743,352.420532 257.072266,351.775024 
+	C256.995605,282.713287 256.995422,214.297043 256.995239,145.880798 
+	C256.995239,145.880798 257.117920,145.533188 257.150635,145.351807 
+z"/>
+<path fill="#FEE66F" opacity="1.000000" stroke="none" 
+	d="
+M256.591064,145.830933 
+	C256.995422,214.297043 256.995605,282.713287 256.994812,351.603210 
+	C230.195908,352.124390 203.397751,352.255219 176.600296,352.167053 
+	C168.835938,352.141510 163.933258,347.856598 161.888336,339.772339 
+	C154.553970,310.776947 147.311157,281.758392 140.043411,252.746170 
+	C136.853577,240.012558 133.735153,227.260834 130.490250,214.541336 
+	C128.796173,207.900787 129.449066,201.883575 135.028519,197.312256 
+	C140.757034,192.618759 146.908951,193.107101 153.229340,196.297363 
+	C169.672302,204.597107 186.160309,212.807602 202.945160,221.211349 
+	C204.032272,219.521423 205.039078,218.045059 205.957352,216.515533 
+	C218.367966,195.843582 230.791138,175.179062 243.149826,154.476059 
+	C246.146027,149.456894 250.034805,145.972580 256.591064,145.830933 
+z"/>
+</svg>
\ No newline at end of file
diff --git a/public/images/blueBlob.svg b/public/images/blueBlob.svg
new file mode 100644
index 0000000..3282688
--- /dev/null
+++ b/public/images/blueBlob.svg
@@ -0,0 +1,69 @@
+<svg class="absolute w-full h-full lg:w-auto lg:h-auto" viewBox="0 0 1681 1268" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g filter="url(#filter0_f_1444_23691)">
+        <path d="M797.509 1376.37C1005.5 1320.64 1187.74 1228.6 1313.76 1120.32C1433.75 1017.23 1529.96 873.405 1489 720.528C1448.03 567.65 1292.8 491.201 1137.34 461.913C974.063 431.154 770.218 442.565 562.23 498.295C354.242 554.025 172.002 646.065 45.9808 754.342C-74.01 857.437 -170.22 1001.26 -129.257 1154.14C-88.2933 1307.01 66.9384 1383.46 222.401 1412.75C385.677 1443.51 589.521 1432.1 797.509 1376.37Z" stroke="url(#paint0_angular_1444_23691)" stroke-width="200"></path>
+    </g>
+    <g filter="url(#filter1_f_1444_23691)">
+        <path d="M797.501 1376.37C1005.49 1320.64 1187.73 1228.6 1313.75 1120.32C1433.74 1017.23 1529.95 873.405 1488.99 720.528C1448.02 567.65 1292.79 491.201 1137.33 461.913C974.055 431.154 770.21 442.565 562.222 498.295C354.234 554.025 171.994 646.065 45.973 754.342C-74.0178 857.437 -170.228 1001.26 -129.264 1154.14C-88.3011 1307.01 66.9306 1383.46 222.393 1412.75C385.669 1443.51 589.513 1432.1 797.501 1376.37Z" stroke="url(#paint1_angular_1444_23691)" stroke-width="200"></path>
+    </g>
+    <g filter="url(#filter2_f_1444_23691)">
+        <path d="M1272.85 196.642C1117.47 41.2578 943.78 -76.6173 783.354 -138.009C703.324 -168.635 619.849 -187.785 539.88 -185.623C458.828 -183.431 372.728 -158.586 306.228 -92.0857C239.728 -25.5856 214.882 60.5139 212.691 141.566C210.529 221.535 229.679 305.011 260.305 385.04C321.696 545.467 439.571 719.156 594.956 874.54C750.34 1029.92 924.03 1147.8 1084.46 1209.19C1164.49 1239.82 1247.96 1258.97 1327.93 1256.81C1408.98 1254.61 1495.08 1229.77 1561.58 1163.27C1628.08 1096.77 1652.93 1010.67 1655.12 929.616C1657.28 849.648 1638.13 766.172 1607.51 686.142C1546.11 525.716 1428.24 352.027 1272.85 196.642Z" stroke="url(#paint2_angular_1444_23691)" stroke-width="300"></path>
+    </g>
+    <g style="mix-blend-mode: overlay" filter="url(#filter3_f_1444_23691)">
+        <path d="M1018.52 1435.59C1226.51 1379.86 1408.75 1287.82 1534.77 1179.55C1654.76 1076.45 1750.97 932.629 1710.01 779.751C1669.05 626.874 1513.82 550.425 1358.35 521.137C1195.08 490.377 991.234 501.788 783.246 557.519C575.257 613.249 393.017 705.289 266.996 813.565C147.006 916.661 50.7955 1060.48 91.759 1213.36C132.722 1366.24 287.954 1442.69 443.417 1471.98C606.692 1502.73 810.537 1491.32 1018.52 1435.59Z" stroke="url(#paint3_angular_1444_23691)" stroke-width="200"></path>
+    </g>
+    <defs>
+        <filter id="filter0_f_1444_23691" x="-439.07" y="145.188" width="2237.88" height="1584.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+            <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_1444_23691"></feGaussianBlur>
+        </filter>
+        <filter id="filter1_f_1444_23691" x="-259.078" y="325.188" width="1877.88" height="1224.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+            <feGaussianBlur stdDeviation="10" result="effect1_foregroundBlur_1444_23691"></feGaussianBlur>
+        </filter>
+        <filter id="filter2_f_1444_23691" x="-137.477" y="-535.788" width="2142.76" height="2142.76" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+            <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_1444_23691"></feGaussianBlur>
+        </filter>
+        <filter id="filter3_f_1444_23691" x="-218.055" y="204.411" width="2237.88" height="1584.29" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+            <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"></feBlend>
+            <feGaussianBlur stdDeviation="100" result="effect1_foregroundBlur_1444_23691"></feGaussianBlur>
+        </filter>
+        <radialGradient id="paint0_angular_1444_23691" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(679.87 937.332) rotate(75) scale(354.525 737.669)">
+            <stop offset="0.140936" stop-color="#5840FA"></stop>
+            <stop offset="0.336288" stop-color="#BFDEF8"></stop>
+            <stop offset="0.44736" stop-color="#FF696A"></stop>
+            <stop offset="0.654315" stop-color="#FF696A"></stop>
+            <stop offset="0.806766" stop-color="#BFDEF8"></stop>
+            <stop offset="1" stop-color="#5840FA"></stop>
+        </radialGradient>
+        <radialGradient id="paint1_angular_1444_23691" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(679.862 937.332) rotate(75) scale(354.525 737.669)">
+            <stop offset="0.140936" stop-color="#5840FA"></stop>
+            <stop offset="0.336288" stop-color="#BFDEF8"></stop>
+            <stop offset="0.44736" stop-color="#FF696A"></stop>
+            <stop offset="0.654315" stop-color="#FF696A"></stop>
+            <stop offset="0.806766" stop-color="#BFDEF8"></stop>
+            <stop offset="1" stop-color="#5840FA"></stop>
+        </radialGradient>
+        <radialGradient id="paint2_angular_1444_23691" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(933.905 535.591) rotate(-45) scale(329.346 737.669)">
+            <stop offset="0.140936" stop-color="#5840FA"></stop>
+            <stop offset="0.336288" stop-color="#BFDEF8"></stop>
+            <stop offset="0.44736" stop-color="#FF696A"></stop>
+            <stop offset="0.654315" stop-color="#FF696A"></stop>
+            <stop offset="0.806766" stop-color="#BFDEF8"></stop>
+            <stop offset="1" stop-color="#5840FA"></stop>
+        </radialGradient>
+        <radialGradient id="paint3_angular_1444_23691" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(900.885 996.556) rotate(75) scale(354.525 737.669)">
+            <stop offset="0.140936" stop-color="#5840FA"></stop>
+            <stop offset="0.336288" stop-color="#BFDEF8"></stop>
+            <stop offset="0.44736" stop-color="#FF696A"></stop>
+            <stop offset="0.654315" stop-color="#FF696A"></stop>
+            <stop offset="0.806766" stop-color="#BFDEF8"></stop>
+            <stop offset="1" stop-color="#5840FA"></stop>
+        </radialGradient>
+    </defs>
+</svg>
\ No newline at end of file
diff --git a/types/index.ts b/types/index.ts
index 3ac5505..8a2d6f9 100644
--- a/types/index.ts
+++ b/types/index.ts
@@ -105,6 +105,11 @@ export interface AudioContextType {
   setAudio: React.Dispatch<React.SetStateAction<AudioProps | undefined>>;
 }
 
+export interface IsFetchingContextType {
+  isFetching: boolean;
+  setIsFetching: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
 export interface PodcastCardProps {
   imgUrl: string;
   title: string;
@@ -119,6 +124,7 @@ export interface CarouselProps {
 export interface ProfileCardProps {
   podcastData: ProfilePodcastProps;
   imageUrl: string;
+  profileId: string;
   userFirstName: string;
 }
 

From b716b6c93b00339eb297188f24d18f54c1b5f6a6 Mon Sep 17 00:00:00 2001
From: Mandeep Singh <mandeeparora132@gmail.com>
Date: Mon, 24 Jun 2024 01:50:19 +0530
Subject: [PATCH 2/2] Adds suspense boundary to useSearchParams() for fixing
 ssr issue

---
 app/plans/page.tsx          | 44 +++++++++++++++----------------------
 components/SearchParams.tsx | 38 ++++++++++++++++++++++++++++++++
 2 files changed, 56 insertions(+), 26 deletions(-)
 create mode 100644 components/SearchParams.tsx

diff --git a/app/plans/page.tsx b/app/plans/page.tsx
index c8d3343..ce5b431 100644
--- a/app/plans/page.tsx
+++ b/app/plans/page.tsx
@@ -4,8 +4,7 @@ import { useAction, useQuery } from "convex/react";
 import { api } from "@/convex/_generated/api";
 import { useRouter } from "next/navigation";
 import { Button } from "@/components/ui/button";
-import React, { useEffect, useState } from "react";
-import { useSearchParams } from "next/navigation";
+import React, { useState } from "react";
 import Image from "next/image";
 import { useGetPlan, useIsSubscribed } from "@/hooks/useIsSubscribed";
 import { useClerk } from "@clerk/nextjs";
@@ -25,6 +24,8 @@ import { useIsFetching } from "@/providers/IsFetchingProvider";
 import LoaderSpinner from "@/components/LoaderSpinner";
 import { pricingPlans } from "@/constants";
 import ButtonSpinner from "@/components/ButtonSpinner";
+import { Suspense } from "react";
+import SearchParams from "@/components/SearchParams";
 
 type planDetails = {
   subscriptionId: string | null;
@@ -38,7 +39,6 @@ export default function Payments() {
   const [annual, setAnnual] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const [selectedPlan, setSelectedPlan] = useState("");
-  const searchParams = useSearchParams();
   const { user } = useClerk();
   const { toast } = useToast();
   const { isFetching } = useIsFetching();
@@ -155,7 +155,6 @@ export default function Payments() {
   };
 
   const handleManageSubscription = async () => {
-
     try {
       setSelectedPlan("manage");
       setIsLoaded(true);
@@ -172,27 +171,17 @@ export default function Payments() {
         variant: "destructive",
       });
     }
-  }
-
-  // if the payment was successful, the user will be redirected to the plans page with a query parameter.
-  // This block checks for the query parameter and displays a success message to the user.
-  useEffect(() => {
-    if (searchParams.get("session_id") && isSubscribed) {
-      setSuccess(true);
+  };
 
-      toast({
-        title: "Payment successful ✅",
-        variant: "success",
-      });
-    }
-    // remove the query parameter from the URL and update the state after 5 seconds.
-    setTimeout(() => {
-      router.replace("/plans");
-      setSuccess(false);
-    }, 5000);
-  }, [searchParams, isSubscribed, toast, router]);
+  function SuspenseFallback() {
+    return (
+      <div className="fixed top-0 left-0 z-50 w-full h-full bg-[--primary-color] flex items-center justify-center">
+        <LoaderSpinner />
+      </div>
+    );
+  }
 
-  if (success) {
+  if (!isFetching && success) {
     return (
       <main className="flex relative flex-col w-full items-center justify-center min-h-screen bg-zinc-950">
         <Image
@@ -216,6 +205,9 @@ export default function Payments() {
 
   return (
     <>
+      <Suspense fallback={<SuspenseFallback />}>
+          <SearchParams setSuccess={setSuccess} />
+      </Suspense>
       {isFetching && !isSubscribed ? (
         <div className="fixed top-0 left-0 z-50 w-full h-full bg-[--primary-color] flex items-center justify-center">
           <LoaderSpinner />
@@ -264,8 +256,8 @@ export default function Payments() {
                             title="Manage"
                             className="w-[fit-content] hover:brightness-[.85] bg-[--accent-color] text-white-1"
                           >
-                              {isLoaded && selectedPlan === "manage" ? (
-                            <ButtonSpinner />
+                            {isLoaded && selectedPlan === "manage" ? (
+                              <ButtonSpinner />
                             ) : null}
                             Manage
                           </Button>
@@ -276,7 +268,7 @@ export default function Payments() {
                             className="w-[fit-content] hover:brightness-[.85] bg-red-500 text-white-1"
                           >
                             {isLoaded && selectedPlan === "cancel" ? (
-                            <ButtonSpinner />
+                              <ButtonSpinner />
                             ) : null}
                             Cancel
                           </Button>
diff --git a/components/SearchParams.tsx b/components/SearchParams.tsx
new file mode 100644
index 0000000..50126dc
--- /dev/null
+++ b/components/SearchParams.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { useToast } from "./ui/use-toast";
+import { useIsSubscribed } from "@/hooks/useIsSubscribed";
+import { useClerk } from "@clerk/nextjs";
+import { useIsFetching } from "@/providers/IsFetchingProvider";
+
+export default function SearchParams({ setSuccess } : { setSuccess: (value: boolean) => void }) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const { toast } = useToast();
+  const { user } = useClerk();
+  const isSubscribed = useIsSubscribed(user?.id ?? "");
+  const isFetching = useIsFetching();
+
+  // if the payment was successful, the user will be redirected to the plans page with a query parameter.
+  // This block checks for the query parameter and displays a success message to the user.
+  useEffect(() => {
+    if (!isFetching && searchParams.get("session_id") && isSubscribed) {
+      setSuccess(true);
+
+      toast({
+        title: "Payment successful ✅",
+        variant: "success",
+      });
+    }
+    // remove the query parameter from the URL and update the state after 5 seconds.
+    setTimeout(() => {
+      router.replace("/plans");
+      setSuccess(false);
+    }, 5000);
+  }, [isFetching, isSubscribed, router, searchParams, setSuccess, toast]);
+
+  return null;
+}
\ No newline at end of file