admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

open paywall when trying to upload video

Browse source
This commit is contained in:
MarconLP 2023-04-21 23:30:33 +02:00
parent 0f9b6736f1
commit 568e58d6a0
No known key found for this signature in database
GPG key ID: A08A9C8B623F5EA5
3 changed files with 40 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/components/NewVideoMenu.tsx
View file

@ -3,10 +3,26 @@ import { Fragment } from "react";
import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen"; import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import recordVideoModalOpen from "~/atoms/recordVideoModalOpen"; import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
import paywallAtom from "~/atoms/paywallAtom";
import { useSession } from "next-auth/react";
export default function NewVideoMenu() { export default function NewVideoMenu() {
const [, setRecordOpen] = useAtom(recordVideoModalOpen); const [, setRecordOpen] = useAtom(recordVideoModalOpen);
const [, setUploadOpen] = useAtom(uploadVideoModalOpen); 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 ( return (
<Menu as="div" className="relative inline-block text-left"> <Menu as="div" className="relative inline-block text-left">
@ -29,7 +45,7 @@ export default function NewVideoMenu() {
<Menu.Item> <Menu.Item>
{({ active }) => ( {({ active }) => (
<div <div
onClick={() => setRecordOpen(true)} onClick={openRecordModal}
className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
active ? "bg-gray-100" : "" active ? "bg-gray-100" : ""
}`} }`}
@ -41,7 +57,7 @@ export default function NewVideoMenu() {
<Menu.Item> <Menu.Item>
{({ active }) => ( {({ active }) => (
<div <div
onClick={() => setUploadOpen(true)} onClick={openUploadModal}
className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${ className={`mx-2 flex h-8 w-40 cursor-pointer flex-row content-center rounded-md p-2 ${
active ? "bg-gray-100" : "" active ? "bg-gray-100" : ""
}`} }`}

9
src/env.mjs
View file

@ -31,7 +31,7 @@ const server = z.object({
STRIPE_SECRET_KEY: z.string(), STRIPE_SECRET_KEY: z.string(),
STRIPE_WEBHOOK_SECRET: z.string(), STRIPE_WEBHOOK_SECRET: z.string(),
STRIPE_MONTHLY_PRICE_ID: 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({ const client = z.object({
// NEXT_PUBLIC_CLIENTVAR: z.string().min(1), // 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_KEY_ID: process.env.AWS_KEY_ID,
AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY, AWS_SECRET_ACCESS_KEY: process.env.AWS_SECRET_ACCESS_KEY,
AWS_BUCKET_NAME: process.env.AWS_BUCKET_NAME, 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_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET, STRIPE_WEBHOOK_SECRET: process.env.STRIPE_WEBHOOK_SECRET,
STRIPE_MONTHLY_PRICE_ID: process.env.STRIPE_MONTHLY_PRICE_ID, 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 // Don't touch the part below

22
src/pages/videos.tsx
View file

@ -18,8 +18,8 @@ import Paywall from "~/components/Paywall";
import paywallAtom from "~/atoms/paywallAtom"; import paywallAtom from "~/atoms/paywallAtom";
const VideoList: NextPage = () => { const VideoList: NextPage = () => {
const [, setRecordOpen] = useAtom(uploadVideoModalOpen); const [, setRecordOpen] = useAtom(recordVideoModalOpen);
const [, setUploadOpen] = useAtom(recordVideoModalOpen); const [, setUploadOpen] = useAtom(uploadVideoModalOpen);
const [, setPaywallOpen] = useAtom(paywallAtom); const [, setPaywallOpen] = useAtom(paywallAtom);
const router = useRouter(); const router = useRouter();
const { status, data: session } = useSession(); const { status, data: session } = useSession();
@ -29,6 +29,18 @@ const VideoList: NextPage = () => {
void router.replace("/sign-in"); void router.replace("/sign-in");
} }
const openRecordModal = () => {
setRecordOpen(true);
};
const openUploadModal = () => {
if (session?.user.stripeSubscriptionStatus === "active") {
setUploadOpen(true);
} else {
setPaywallOpen(true);
}
};
return ( return (
<> <>
<Head> <Head>
@ -65,13 +77,13 @@ const VideoList: NextPage = () => {
</span> </span>
<div className="mt-4"> <div className="mt-4">
<button <button
onClick={() => setUploadOpen(true)} onClick={openRecordModal}
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" 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 Record a video
</button> </button>
<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" 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 Upload a video