Merge pull request #352 from mfts/feat/billing-update

feat: add and update pricing / billing pages

Author: mfts

components/billing/upgrade-plan-modal.tsx

@@ -3,14 +3,15 @@ import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
 import { motion } from "framer-motion";
 import { STAGGER_CHILD_VARIANTS } from "@/lib/constants";
-import CheckCircle2 from "@/components/shared/icons/check-cirlce-2";
 import { capitalize } from "@/lib/utils";
 import { PLANS } from "@/lib/stripe/utils";
 import { getStripe } from "@/lib/stripe/client";
 import { Badge } from "../ui/badge";
 import { useTeam } from "@/context/team-context";
 import { useAnalytics } from "@/lib/analytics";
 import React from "react";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { CheckIcon } from "lucide-react";
 
 export function UpgradePlanModal({
   clickedPlan,
@@ -19,28 +20,55 @@ export function UpgradePlanModal({
   setOpen,
   children,
 }: {
-  clickedPlan: "Enterprise" | "Pro";
+  clickedPlan: "Business" | "Pro";
   trigger?: string;
   open?: boolean;
   setOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   children?: React.ReactNode;
 }) {
-  const [plan, setPlan] = useState<"Pro" | "Enterprise">(clickedPlan);
+  const [plan, setPlan] = useState<"Pro" | "Business">(clickedPlan);
   const [period, setPeriod] = useState<"monthly" | "yearly">("monthly");
   const [clicked, setClicked] = useState<boolean>(false);
   const teamInfo = useTeam();
   const analytics = useAnalytics();
 
   const features = useMemo(() => {
+    if (plan === "Pro") {
+      return [
+        "Folders",
+        "3 team members",
+        "Unlimited link views",
+        "Custom domains",
+        "Custom branding",
+        "Notion documents",
+        "AI Document Assistant incl. 1500 credits",
+      ];
+    }
+
+    if (plan === "Business") {
+      return [
+        "Unlimited subfolder levels",
+        "10 team members",
+        "Unlimited documents",
+        "Unlimited link views",
+        "Custom domains",
+        "Custom branding",
+        "Notion documents",
+        "Data room (coming soon)",
+        "Shareable folders (coming soon)",
+        "AI Document Assistant incl. 2500 credits",
+        "Priority Support",
+      ];
+    }
+
     return [
+      "Folders",
+      "3 team members",
+      "Unlimited link views",
       "Custom domains",
       "Custom branding",
       "Notion documents",
-      "Unlimited link views",
-      "Unlimited documents",
-      "Team members",
       "AI Document Assistant incl. 1500 credits",
-      ...(plan === "Enterprise" ? ["Priority Support"] : []),
     ];
   }, [plan]);
 
@@ -103,7 +131,18 @@ export function UpgradePlanModal({
             Enjoy higher limits and extra features with our {plan} plan.
           </motion.p>
         </motion.div>
-        <div className="bg-background px-4 py-8 text-left sm:px-16">
+
+        <div className="bg-background px-4 pb-8 text-left sm:px-16">
+          <Tabs className="pb-4" defaultValue={plan}>
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="Pro" onClick={() => setPlan("Pro")}>
+                Pro
+              </TabsTrigger>
+              <TabsTrigger value="Business" onClick={() => setPlan("Business")}>
+                Business
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
           <motion.div
             className="flex flex-col space-y-3"
             variants={STAGGER_CHILD_VARIANTS}
@@ -121,17 +160,15 @@ export function UpgradePlanModal({
                     className="text-sm font-normal normal-case"
                   >{`€${
                     PLANS.find((p) => p.name === plan)!.price[period].amount
-                  }/month`}</Badge>
+                  }/${period.replace("ly", "")}`}</Badge>
                 </div>
                 <button
                   onClick={() => {
                     setPeriod(period === "monthly" ? "yearly" : "monthly");
                   }}
                   className="text-xs text-muted-foreground underline underline-offset-4 transition-colors hover:text-gray-800 hover:dark:text-muted-foreground/80"
                 >
-                  {period === "monthly"
-                    ? "Get 2 months free 🎁"
-                    : "Switch to monthly"}
+                  {period === "monthly" ? "Want 20% off?" : "Switch to monthly"}
                 </button>
               </div>
               <motion.div
@@ -150,9 +187,12 @@ export function UpgradePlanModal({
                   <motion.div
                     key={i}
                     variants={STAGGER_CHILD_VARIANTS}
-                    className="flex items-center space-x-2 text-sm text-muted-foreground"
+                    className="flex items-center gap-x-3 text-sm text-muted-foreground"
                   >
-                    <CheckCircle2 className="h-5 w-5 text-emerald-500" />
+                    <CheckIcon
+                      className="h-5 w-5 flex-none text-[#fb7a00]"
+                      aria-hidden="true"
+                    />
                     <span>{feature}</span>
                   </motion.div>
                 ))}
@@ -194,16 +234,7 @@ export function UpgradePlanModal({
                 target="_blank"
                 className="text-center text-xs text-muted-foreground underline-offset-4 transition-all hover:text-gray-800 hover:dark:text-muted-foreground/80 hover:underline"
               >
-                Papermark Enterprise
-              </a>
-              <p className="text-muted-foreground">•</p>
-              <a
-                href={`${process.env.NEXT_PUBLIC_BASE_URL}/pricing`}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-center text-xs text-muted-foreground underline-offset-4 transition-all hover:text-gray-800 hover:dark:text-muted-foreground/80 hover:underline"
-              >
-                Compare plans
+                Looking for Papermark Enterprise?
               </a>
             </div>
           </motion.div>

lib/stripe/utils.ts

@@ -51,7 +51,7 @@ export const PLANS = [
         },
       },
       yearly: {
-        amount: 24,
+        amount: 290,
         priceIds: {
           test: "price_1NmHHaFJyGSZ96lhXxg2fTr7",
           production: "price_1Op0fFFJyGSZ96lhPVrvzz5a", // new price
@@ -60,4 +60,24 @@ export const PLANS = [
       },
     },
   },
+  {
+    name: "Business",
+    slug: "business",
+    price: {
+      monthly: {
+        amount: 79,
+        priceIds: {
+          test: "price_1OuYgCFJyGSZ96lhF2gFs7Rs",
+          production: "price_1OuYeIFJyGSZ96lhwH58Y1kU",
+        },
+      },
+      yearly: {
+        amount: 790,
+        priceIds: {
+          test: "price_1OuYgPFJyGSZ96lhKk6JzTf1",
+          production: "price_1OuYedFJyGSZ96lhTaJx58pG",
+        },
+      },
+    },
+  },
 ];

pages/pricing.tsx

@@ -24,6 +24,7 @@ const tiers: {
     annually: string;
   };
   description: string;
+  featureIntro: string;
   features: string[];
   bgColor: string;
   borderColor: string;
@@ -35,12 +36,14 @@ const tiers: {
     name: "Free",
     id: "tier-free",
     href: "/login",
-    price: { monthly: "€0", annually: "$0" },
+    price: { monthly: "€0", annually: "€0" },
     description: "The essentials to start sharing documents securely.",
+    featureIntro: "What's included:",
     features: [
       "1 user",
       "Unlimited links",
-      "Analytics for each page",
+      "Page-by-page analytics",
+      "30-day analytics retention",
       "Document sharing controls",
     ],
 
@@ -52,15 +55,16 @@ const tiers: {
   },
   {
     name: "Pro",
-    id: "tier-freelancer",
+    id: "tier-pro",
     href: "/login",
-    price: { monthly: "€29", annually: "$290" },
-    description:
-      "The essentials to provide a branded experience for your documents.",
+    price: { monthly: "€29", annually: "€290" },
+    description: "The branded experience for your documents.",
+    featureIntro: "Everything in Free, plus:",
     features: [
-      "Everything in Free, plus:",
-      "Up to 3 active users",
+      "3 users",
       "Custom domain",
+      "Custom branding",
+      "1-year analytics retention",
       "Advanced access controls",
       "Papermark AI",
     ],
@@ -72,16 +76,18 @@ const tiers: {
   },
   {
     name: "Business",
-    id: "tier-startup",
+    id: "tier-business",
     href: "/login",
-    price: { monthly: "€79", annually: "$790" },
+    price: { monthly: "€79", annually: "€790" },
     description: "A plan that scales with your rapidly growing business.",
+    featureIntro: "Everything in Pro, plus:",
     features: [
-      "Everything in Pro, plus:",
-      "Up to 10 active users",
-      "Data room",
+      "10 users",
+      "Unlimited documents",
+      "Unlimited subfolder levels",
       "Large file uploads",
-      "Custom Branding",
+      "Data rooms (coming soon)",
+      "Shareable folders (coming soon)",
       "24h Priority Support",
     ],
     bgColor: "#fb7a00",
@@ -94,12 +100,14 @@ const tiers: {
     name: "Enterprise",
     id: "tier-enterprise",
     href: "https://cal.com/marcseitz/papermark",
-    price: { monthly: "Custom", annually: "$" },
+    price: { monthly: "Custom", annually: "Custom" },
     description: "Self-hosted and advanced infrastructure for your company.",
+    featureIntro: "Tailored solutions:",
     features: [
-      "Self-Hosted version",
+      "Self-hosted version",
       "Unlimited users",
       "Unlimited documents",
+      "Unlimited folders and subfolders",
       "Different file types",
       "Up to 5TB file uploads",
       "Dedicated support",
@@ -193,6 +201,7 @@ export default function PricingPage() {
                         role="list"
                         className="mt-8 space-y-3 text-sm leading-6 text-gray-600"
                       >
+                        <li>{tier.featureIntro}</li>
                         {tier.features.map((feature) => (
                           <li key={feature} className="flex gap-x-3">
                             <CheckIcon
@@ -214,17 +223,18 @@ export default function PricingPage() {
                         });
                       }}
                     >
-                      <Button
-                        className="rounded-3xl hover:bg-gray-100"
-                        style={{
-                          backgroundColor: tier.bgColor,
-                          borderColor: tier.borderColor,
-                          color: tier.textColor,
-                          borderWidth: "1px",
-                        }}
-                      >
-                        {tier.buttonText}
-                      </Button>
+                      {tier.id === "tier-business" ? (
+                        <Button
+                          className="rounded-3xl text-base"
+                          variant="orange"
+                        >
+                          {tier.buttonText}
+                        </Button>
+                      ) : (
+                        <Button className="rounded-3xl text-base text-gray-200 bg-black hover:bg-gray-900">
+                          {tier.buttonText}
+                        </Button>
+                      )}
                     </Link>
                   </div>
                 </div>
@@ -234,7 +244,7 @@ export default function PricingPage() {
         </div>
 
         <div className="w-full max-w-7xl px-4 md:px-8 mx-auto ">
-          <div className="py-12 bg-[#fb7a00] rounded-3xl mx-auto px-6">
+          <div className="py-12 bg-[#fb7a00] rounded-xl mx-auto px-6">
             <div className="flex lg:flex-row flex-col item-center justify-between space-y-10 lg:space-y-0">
               <h2 className="text-3xl text-nowrap">Looking to self-host?</h2>
               <div className="space-x-2 flex items-center">