added yearly plan

.env.sample

@@ -22,11 +22,11 @@ EMAIL_SERVER=
 # Stripe settings (You don't need these, it's for the cloud instance payments)
 NEXT_PUBLIC_STRIPE_IS_ACTIVE=
 STRIPE_SECRET_KEY=
-PRICE_ID=
+MONTHLY_PRICE_ID=
+YEARLY_PRICE_ID=
 NEXT_PUBLIC_TRIAL_PERIOD_DAYS=
 NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL=
 BASE_URL=http://localhost:3000
-NEXT_PUBLIC_PRICING=
 
 # Docker postgres settings
 POSTGRES_PASSWORD=

pages/api/payment/index.ts

@@ -2,18 +2,27 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { getServerSession } from "next-auth/next";
 import { authOptions } from "@/pages/api/auth/[...nextauth]";
 import paymentCheckout from "@/lib/api/paymentCheckout";
+import { Plan } from "@/types/global";
 
 export default async function users(req: NextApiRequest, res: NextApiResponse) {
   const STRIPE_SECRET_KEY = process.env.STRIPE_SECRET_KEY;
-  const PRICE_ID = process.env.PRICE_ID;
+  const MONTHLY_PRICE_ID = process.env.MONTHLY_PRICE_ID;
+  const YEARLY_PRICE_ID = process.env.YEARLY_PRICE_ID;
   const session = await getServerSession(req, res, authOptions);
 
   if (!session?.user?.id)
     return res.status(401).json({ response: "You must be logged in." });
-  else if (!STRIPE_SECRET_KEY || !PRICE_ID) {
+  else if (!STRIPE_SECRET_KEY || !MONTHLY_PRICE_ID || !YEARLY_PRICE_ID) {
     return res.status(400).json({ response: "Payment is disabled." });
   }
 
+  let PRICE_ID = MONTHLY_PRICE_ID;
+
+  if ((Number(req.query.plan) as unknown as Plan) === Plan.monthly)
+    PRICE_ID = MONTHLY_PRICE_ID;
+  else if ((Number(req.query.plan) as unknown as Plan) === Plan.yearly)
+    PRICE_ID = YEARLY_PRICE_ID;
+
   if (req.method === "GET") {
     const users = await paymentCheckout(
       STRIPE_SECRET_KEY,

pages/subscribe.tsx

@@ -6,10 +6,13 @@ import { toast } from "react-hot-toast";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 import CenteredForm from "@/layouts/CenteredForm";
+import { Plan } from "@/types/global";
 
 export default function Subscribe() {
   const [submitLoader, setSubmitLoader] = useState(false);
 
+  const [plan, setPlan] = useState<Plan>(0);
+
   const { data, status } = useSession();
   const router = useRouter();
 
@@ -18,7 +21,7 @@ export default function Subscribe() {
 
     const redirectionToast = toast.loading("Redirecting to Stripe...");
 
-    const res = await fetch("/api/payment");
+    const res = await fetch("/api/payment?plan=" + plan);
     const data = await res.json();
 
     router.push(data.response);
@@ -26,11 +29,9 @@ export default function Subscribe() {
 
   return (
     <CenteredForm
-      text={`${
+      text={`Start with a ${
         process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
-      }-Day free trial, then $${
-        process.env.NEXT_PUBLIC_PRICING
-      }/month afterwards`}
+      }-day free trial, cancel anytime!`}
     >
       <div className="p-2 mx-auto flex flex-col gap-3 justify-between sm:w-[30rem] dark:border-neutral-700 w-80 bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100">
         <p className="text-2xl text-center font-bold">
@@ -38,16 +39,64 @@ export default function Subscribe() {
         </p>
 
         <div>
-          <p>You will be redirected to Stripe.</p>
           <p>
-            Feel free to reach out to us at{" "}
+            You will be redirected to Stripe, feel free to reach out to us at{" "}
             <a className="font-semibold" href="mailto:support@linkwarden.app">
               support@linkwarden.app
             </a>{" "}
-            in case of any issues.
+            in case of any issue.
           </p>
         </div>
 
+        <div className="flex text-white dark:text-black gap-3 border border-solid border-sky-100 dark:border-neutral-700 w-4/5 mx-auto p-1 rounded-xl relative">
+          <button
+            onClick={() => setPlan(Plan.monthly)}
+            className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
+              plan === Plan.monthly
+                ? "text-white bg-sky-700 dark:bg-sky-700"
+                : "hover:opacity-80"
+            }`}
+          >
+            <p>Monthly</p>
+          </button>
+
+          <button
+            onClick={() => setPlan(Plan.yearly)}
+            className={`w-full text-black dark:text-white duration-75 text-sm rounded-lg p-1 ${
+              plan === Plan.yearly
+                ? "text-white bg-sky-700 dark:bg-sky-700"
+                : "hover:opacity-80"
+            }`}
+          >
+            <p>Yearly</p>
+          </button>
+          <div className="absolute -top-4 -right-4 px-1 bg-red-500 text-white rounded-md rotate-[22deg]">
+            %25 Off
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2 justify-center items-center">
+          <p className="text-3xl">
+            ${plan === Plan.monthly ? "4" : "3"}
+            <span className="text-base text-gray-500 dark:text-gray-400">
+              /mo
+            </span>
+          </p>
+          <p className="font-semibold">
+            Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
+          </p>
+          <div className="flex gap-3">
+            <p className="w-fit">Total:</p>
+            <div className="w-full p-1 rounded-md border border-solid border-sky-100 dark:border-neutral-700">
+              <p className="text-sm">
+                {process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then
+                ${plan === Plan.monthly ? "4" : "3"} per month
+              </p>
+              <p className="text-sm">+ VAT if applicable</p>
+            </div>
+          </div>
+        </div>
+
         <SubmitButton
           onClick={loginUser}
           label="Complete your Subscription"

types/enviornment.d.ts

@@ -20,11 +20,11 @@ declare global {
 
       NEXT_PUBLIC_STRIPE_IS_ACTIVE?: string;
       STRIPE_SECRET_KEY?: string;
-      PRICE_ID?: string;
+      MONTHLY_PRICE_ID?: string;
+      YEARLY_PRICE_ID?: string;
       NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL?: string;
       NEXT_PUBLIC_TRIAL_PERIOD_DAYS?: string;
       BASE_URL?: string;
-      NEXT_PUBLIC_PRICING?: string;
     }
   }
 }

types/global.ts

@@ -85,3 +85,8 @@ interface CollectionIncludingLinks extends Collection {
 export interface Backup extends Omit<User, "password" | "id" | "image"> {
   collections: CollectionIncludingLinks[];
 }
+
+export enum Plan {
+  monthly,
+  yearly,
+}