diff --git a/src/components/NewVideoMenu.tsx b/src/components/NewVideoMenu.tsx index dd5dee0..e311f15 100644 --- a/src/components/NewVideoMenu.tsx +++ b/src/components/NewVideoMenu.tsx @@ -3,10 +3,26 @@ import { Fragment } from "react"; import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen"; import { useAtom } from "jotai"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; +import paywallAtom from "~/atoms/paywallAtom"; +import { useSession } from "next-auth/react"; export default function NewVideoMenu() { const [, setRecordOpen] = useAtom(recordVideoModalOpen); const [, setUploadOpen] = useAtom(uploadVideoModalOpen); + const [, setPaywallOpen] = useAtom(paywallAtom); + const { data: session } = useSession(); + + const openRecordModal = () => { + setRecordOpen(true); + }; + + const openUploadModal = () => { + if (session?.user.stripeSubscriptionStatus === "active") { + setUploadOpen(true); + } else { + setPaywallOpen(true); + } + }; return ( @@ -29,7 +45,7 @@ export default function NewVideoMenu() { {({ active }) => (
setRecordOpen(true)} + onClick={openRecordModal} className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ active ? "bg-gray-100" : "" }`} @@ -41,7 +57,7 @@ export default function NewVideoMenu() { {({ active }) => (
setUploadOpen(true)} + onClick={openUploadModal} className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ active ? "bg-gray-100" : "" }`} diff --git a/src/env.mjs b/src/env.mjs index b0efa4b..8c56d32 100644 --- a/src/env.mjs +++ b/src/env.mjs @@ -31,7 +31,7 @@ const server = z.object({ STRIPE_SECRET_KEY: z.string(), STRIPE_WEBHOOK_SECRET: z.string(), STRIPE_MONTHLY_PRICE_ID: z.string(), - STRIPE_ANNUAL_PRICE_ID: z.string() + STRIPE_ANNUAL_PRICE_ID: z.string(), }); /** @@ -40,7 +40,7 @@ const server = z.object({ */ const client = z.object({ // NEXT_PUBLIC_CLIENTVAR: z.string().min(1), - NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string() + NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: z.string(), }); /** @@ -64,11 +64,12 @@ const processEnv = { AWS_KEY_ID: process.env.AWS_KEY_ID, AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY, AWS_BUCKET_NAME: process.env.AWS_BUCKET_NAME, - NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, + NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY: + process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY, STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY, STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET, STRIPE_MONTHLY_PRICE_ID: process.env.STRIPE_MONTHLY_PRICE_ID, - STRIPE_ANNUAL_PRICE_ID: process.env.STRIPE_ANNUAL_PRICE_ID + STRIPE_ANNUAL_PRICE_ID: process.env.STRIPE_ANNUAL_PRICE_ID, }; // Don't touch the part below diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx index f8cbcae..f5df1bd 100644 --- a/src/pages/videos.tsx +++ b/src/pages/videos.tsx @@ -18,8 +18,8 @@ import Paywall from "~/components/Paywall"; import paywallAtom from "~/atoms/paywallAtom"; const VideoList: NextPage = () => { - const [, setRecordOpen] = useAtom(uploadVideoModalOpen); - const [, setUploadOpen] = useAtom(recordVideoModalOpen); + const [, setRecordOpen] = useAtom(recordVideoModalOpen); + const [, setUploadOpen] = useAtom(uploadVideoModalOpen); const [, setPaywallOpen] = useAtom(paywallAtom); const router = useRouter(); const { status, data: session } = useSession(); @@ -29,6 +29,18 @@ const VideoList: NextPage = () => { void router.replace("/sign-in"); } + const openRecordModal = () => { + setRecordOpen(true); + }; + + const openUploadModal = () => { + if (session?.user.stripeSubscriptionStatus === "active") { + setUploadOpen(true); + } else { + setPaywallOpen(true); + } + }; + return ( <> @@ -65,13 +77,13 @@ const VideoList: NextPage = () => {