From 200c9c2612d7d4bc45891bf7dff0b6f34d649886 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Thu, 20 Apr 2023 19:25:09 +0200
Subject: [PATCH] add paywall

---
 src/atoms/paywallAtom.ts         |   3 +
 src/components/Paywall.tsx       | 167 +++++++++++++++++++++++++++++++
 src/env.mjs                      |   6 +-
 src/pages/videos.tsx             |   6 +-
 src/server/api/routers/stripe.ts |  79 ++++++++-------
 5 files changed, 221 insertions(+), 40 deletions(-)
 create mode 100644 src/atoms/paywallAtom.ts
 create mode 100644 src/components/Paywall.tsx

diff --git a/src/atoms/paywallAtom.ts b/src/atoms/paywallAtom.ts
new file mode 100644
index 0000000..82f2397
--- /dev/null
+++ b/src/atoms/paywallAtom.ts
@@ -0,0 +1,3 @@
+import { atom } from "jotai";
+
+export default atom<boolean>(false);
diff --git a/src/components/Paywall.tsx b/src/components/Paywall.tsx
new file mode 100644
index 0000000..7b7c258
--- /dev/null
+++ b/src/components/Paywall.tsx
@@ -0,0 +1,167 @@
+import { Dialog, Transition } from "@headlessui/react";
+import { Fragment, useState } from "react";
+import { useAtom } from "jotai";
+import paywallAtom from "~/atoms/paywallAtom";
+import { CloseIcon } from "next/dist/client/components/react-dev-overlay/internal/icons/CloseIcon";
+import { api } from "~/utils/api";
+import { useRouter } from "next/router";
+import { CheckIcon } from "@heroicons/react/20/solid";
+
+export default function Paywall() {
+  const { mutateAsync: createCheckoutSession } =
+    api.stripe.createCheckoutSession.useMutation();
+  const router = useRouter();
+  const [open, setOpen] = useAtom(paywallAtom);
+  const [billedAnnually, setBilledAnnually] = useState<boolean>(false);
+
+  function closeModal() {
+    setOpen(false);
+  }
+
+  function openModal() {
+    setOpen(true);
+  }
+
+  const handleCheckout = async () => {
+    const { checkoutUrl } = await createCheckoutSession({ billedAnnually });
+    if (checkoutUrl) {
+      void router.push(checkoutUrl);
+    }
+  };
+
+  return (
+    <Transition appear show={open} as={Fragment}>
+      <Dialog as="div" className="relative z-10" onClose={closeModal}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-black bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 overflow-y-auto">
+          <div className="flex h-full min-h-full items-center justify-center text-center">
+            <Transition.Child
+              as={Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <Dialog.Panel className="h-full w-full transform overflow-hidden bg-[#f9fafb] text-left align-middle shadow-xl transition-all">
+                <button
+                  onClick={closeModal}
+                  className="absolute right-6 top-6 text-gray-600"
+                  tabIndex={0}
+                >
+                  <CloseIcon />
+                </button>
+                <div className="mx-auto max-w-7xl px-8 pt-20">
+                  <section className="relative mx-auto flex max-w-4xl flex-col justify-between gap-8 md:flex-row md:items-center ">
+                    <div
+                      id="heading-comp-1"
+                      className="flex max-w-lg flex-col items-start"
+                    >
+                      <div className="my-8 ">
+                        <h1 className="text-3xl font-bold leading-normal sm:text-4xl sm:leading-normal">
+                          Upgrade your plan
+                        </h1>
+                        <p className="mt-4 pr-8 text-lg text-gray-500">
+                          Turn your testimonials into your most powerful
+                          marketing tool with Senja.
+                        </p>
+                      </div>
+                      <p className="mt-6 text-base text-gray-500">
+                        No contract. Cancel any time
+                      </p>
+                    </div>
+                    <div className="w-full md:max-w-sm">
+                      <div className="sm:align-center mb-4 flex flex-none flex-wrap items-center gap-4 px-2 py-1 md:justify-center">
+                        <div className="relative flex items-center gap-2 text-sm font-medium">
+                          <span className=" svelte-10wstod">Monthly</span>
+                          <label className="group relative flex cursor-pointer items-center gap-2 text-sm font-medium text-gray-600">
+                            <input
+                              onClick={() => setBilledAnnually(!billedAnnually)}
+                              checked={billedAnnually}
+                              type="checkbox"
+                              className="peer absolute left-1/2 hidden h-full w-full -translate-x-1/2 rounded-md"
+                            />
+                            <span className="flex h-6 w-12 flex-shrink-0 items-center rounded-full bg-gray-300 p-1 duration-300 ease-in-out after:h-4 after:w-4 after:rounded-full after:bg-white after:shadow-md after:duration-300 group-hover:after:translate-x-1 peer-checked:bg-[#24b47e] peer-checked:after:translate-x-6">
+                              <span className="sr-only" />
+                            </span>
+                            <span />
+                          </label>
+                          <span className="svelte-10wstod opacity-50">
+                            Annually
+                          </span>
+                          <span className="rounded-md bg-[#cbf4c9] px-2 py-1 text-xs text-[#0e6245]">
+                            20% Off
+                          </span>
+                        </div>
+                      </div>
+                      <div
+                        id="pricing-comp"
+                        className="w-full flex-none rounded-3xl border bg-white shadow-sm"
+                      >
+                        <div className="hero relative flex flex-col items-start rounded-3xl px-6 py-6 shadow-sm">
+                          <div className="svelte-10wstod rounded-lg bg-white/20 px-2 font-medium">
+                            Pro
+                          </div>
+                          <div className="mb-2 mt-4 flex items-end text-5xl font-extrabold tracking-tight">
+                            {billedAnnually ? "$4" : "$5"}
+                            <span className="mb-1 text-sm opacity-80">
+                              / mo.
+                            </span>
+                          </div>
+                          <div className="mt-2 text-sm">
+                            {billedAnnually
+                              ? "billed annually"
+                              : "billed monthly"}
+                          </div>
+                          <div className="mt-2 flex-grow" />
+                          <button
+                            onClick={() => void handleCheckout()}
+                            type="submit"
+                            className="btn mt-4 block w-full appearance-none rounded-lg bg-black px-4 py-2.5 text-center text-sm font-medium text-white shadow-lg shadow-black/50 duration-100 focus:outline-transparent disabled:opacity-80"
+                          >
+                            Upgrade
+                          </button>
+                        </div>
+                        <div className="mt-4 flex flex-col gap-2 pb-8">
+                          {[
+                            "Unlimited videos",
+                            "Video uploads",
+                            "Custom branding",
+                          ].map((x) => (
+                            <div
+                              key={x}
+                              className="flex items-center gap-2 text-gray-500"
+                            >
+                              <div className="ml-6 h-5 w-5 flex-none">
+                                <CheckIcon />
+                              </div>
+                              <div className="svelte-10wstod text-base text-gray-500 underline decoration-gray-400 decoration-dashed underline-offset-4">
+                                {x}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </section>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}
diff --git a/src/env.mjs b/src/env.mjs
index 3b02feb..b0efa4b 100644
--- a/src/env.mjs
+++ b/src/env.mjs
@@ -30,7 +30,8 @@ const server = z.object({
   AWS_BUCKET_NAME: z.string(),
   STRIPE_SECRET_KEY: z.string(),
   STRIPE_WEBHOOK_SECRET: z.string(),
-  STRIPE_PRICE_ID: z.string()
+  STRIPE_MONTHLY_PRICE_ID: z.string(),
+  STRIPE_ANNUAL_PRICE_ID: z.string()
 });
 
 /**
@@ -66,7 +67,8 @@ const processEnv = {
   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_PRICE_ID: process.env.STRIPE_PRICE_ID
+  STRIPE_MONTHLY_PRICE_ID: process.env.STRIPE_MONTHLY_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 54420cd..d7a6d6b 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -14,10 +14,13 @@ import VideoUploadModal from "~/components/VideoUploadModal";
 import { useAtom } from "jotai";
 import uploadVideoModalOpen from "~/atoms/uploadVideoModalOpen";
 import recordVideoModalOpen from "~/atoms/recordVideoModalOpen";
+import Paywall from "~/components/Paywall";
+import paywallAtom from "~/atoms/paywallAtom";
 
 const VideoList: NextPage = () => {
   const [, setRecordOpen] = useAtom(uploadVideoModalOpen);
   const [, setUploadOpen] = useAtom(recordVideoModalOpen);
+  const [, setPaywallOpen] = useAtom(paywallAtom);
   const router = useRouter();
   const { status } = useSession();
   const { data: videos, isLoading } = api.video.getAll.useQuery();
@@ -39,6 +42,7 @@ const VideoList: NextPage = () => {
           <div className="flex flex-row items-center justify-center">
             <VideoRecordModal />
             <VideoUploadModal />
+            <Paywall />
 
             <NewVideoMenu />
             {status === "authenticated" && (
@@ -67,7 +71,7 @@ const VideoList: NextPage = () => {
                     Record a video
                   </button>
                   <button
-                    onClick={() => setRecordOpen(true)}
+                    onClick={() => setPaywallOpen(true)}
                     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
diff --git a/src/server/api/routers/stripe.ts b/src/server/api/routers/stripe.ts
index 2caa590..6792c64 100644
--- a/src/server/api/routers/stripe.ts
+++ b/src/server/api/routers/stripe.ts
@@ -1,52 +1,57 @@
 import { env } from "~/env.mjs";
 import { getOrCreateStripeCustomerIdForUser } from "~/server/stripe-webhook-handlers";
 import { createTRPCRouter, protectedProcedure } from "~/server/api/trpc";
+import { z } from "zod";
 
 export const stripeRouter = createTRPCRouter({
-  createCheckoutSession: protectedProcedure.mutation(async ({ ctx }) => {
-    const { stripe, session, prisma, req } = ctx;
+  createCheckoutSession: protectedProcedure
+    .input(z.object({ billedAnnually: z.boolean() }))
+    .mutation(async ({ ctx, input }) => {
+      const { stripe, session, prisma, req } = ctx;
 
-    const customerId = await getOrCreateStripeCustomerIdForUser({
-      prisma,
-      stripe,
-      userId: session.user?.id,
-    });
+      const customerId = await getOrCreateStripeCustomerIdForUser({
+        prisma,
+        stripe,
+        userId: session.user?.id,
+      });
 
-    if (!customerId) {
-      throw new Error("Could not create customer");
-    }
+      if (!customerId) {
+        throw new Error("Could not create customer");
+      }
 
-    const baseUrl =
-      env.NODE_ENV === "development"
-        ? `http://${req.headers.host ?? "localhost:3000"}`
-        : `https://${req.headers.host ?? env.NEXTAUTH_URL}`;
+      const baseUrl =
+        env.NODE_ENV === "development"
+          ? `http://${req.headers.host ?? "localhost:3000"}`
+          : `https://${req.headers.host ?? env.NEXTAUTH_URL}`;
 
-    const checkoutSession = await stripe.checkout.sessions.create({
-      customer: customerId,
-      client_reference_id: session.user?.id,
-      payment_method_types: ["card"],
-      mode: "subscription",
-      line_items: [
-        {
-          price: env.STRIPE_PRICE_ID,
-          quantity: 1,
+      const checkoutSession = await stripe.checkout.sessions.create({
+        customer: customerId,
+        client_reference_id: session.user?.id,
+        payment_method_types: ["card"],
+        mode: "subscription",
+        line_items: [
+          {
+            price: input.billedAnnually
+              ? env.STRIPE_ANNUAL_PRICE_ID
+              : env.STRIPE_MONTHLY_PRICE_ID,
+            quantity: 1,
+          },
+        ],
+        success_url: `${baseUrl}/videos?checkoutSuccess=true`,
+        cancel_url: `${baseUrl}/videos?checkoutCanceled=true`,
+        subscription_data: {
+          metadata: {
+            userId: session.user?.id,
+          },
         },
-      ],
-      success_url: `${baseUrl}/videos?checkoutSuccess=true`,
-      cancel_url: `${baseUrl}/videos?checkoutCanceled=true`,
-      subscription_data: {
-        metadata: {
-          userId: session.user?.id,
-        },
-      },
-    });
+      });
 
-    if (!checkoutSession) {
-      throw new Error("Could not create checkout session");
-    }
+      if (!checkoutSession) {
+        throw new Error("Could not create checkout session");
+      }
 
-    return { checkoutUrl: checkoutSession.url };
-  }),
+      return { checkoutUrl: checkoutSession.url };
+    }),
   createBillingPortalSession: protectedProcedure.mutation(async ({ ctx }) => {
     const { stripe, session, prisma, req } = ctx;