From 568e58d6a0d46201fa6cc215f2ab03724442353e Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Fri, 21 Apr 2023 23:30:33 +0200
Subject: [PATCH] open paywall when trying to upload video

---
 src/components/NewVideoMenu.tsx | 20 ++++++++++++++++++--
 src/env.mjs                     |  9 +++++----
 src/pages/videos.tsx            | 22 +++++++++++++++++-----
 3 files changed, 40 insertions(+), 11 deletions(-)

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 (
     <Menu as="div" className="relative inline-block text-left">
@@ -29,7 +45,7 @@ export default function NewVideoMenu() {
             <Menu.Item>
               {({ active }) => (
                 <div
-                  onClick={() => 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() {
             <Menu.Item>
               {({ active }) => (
                 <div
-                  onClick={() => 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 (
     <>
       <Head>
@@ -65,13 +77,13 @@ const VideoList: NextPage = () => {
                 </span>
                 <div className="mt-4">
                   <button
-                    onClick={() => setUploadOpen(true)}
-                    className="inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    onClick={openRecordModal}
+                    className="inline-flex items-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                   >
                     Record a video
                   </button>
                   <button
-                    onClick={() => setRecordOpen(true)}
+                    onClick={openUploadModal}
                     className="ml-4 inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
                   >
                     Upload a video