Merge pull request #1 from deepsingh132/development

Adds the Stripe payment gateway API for subscriptions and billing
deepsingh132 · Jun 23, 2024 · 51fb4bf · 51fb4bf
2 parents b4bddf1 + b716b6c
commit 51fb4bf
Show file tree

Hide file tree

Showing 32 changed files with 2,076 additions and 121 deletions.
diff --git 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,51 +194,60 @@ 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>
               )}
             />
           </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
diff --git 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
@@ -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
@@ -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>
   );