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 { 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" : ""
}`}

9
src/env.mjs
View file

@ -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

22
src/pages/videos.tsx
View file

@ -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