Merge pull request #384 from documenso/feat/stripe-free-tier

feat: add Stripe free tier subscription

apps/marketing/process-env.d.ts

@@ -7,6 +7,7 @@ declare namespace NodeJS {
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
+    NEXT_PUBLIC_STRIPE_FREE_PLAN_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

apps/web/process-env.d.ts

@@ -7,6 +7,7 @@ declare namespace NodeJS {
 
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_MONTHLY_PRICE_ID: string;
     NEXT_PUBLIC_STRIPE_COMMUNITY_PLAN_YEARLY_PRICE_ID: string;
+    NEXT_PUBLIC_STRIPE_FREE_PLAN_ID?: string;
 
     NEXT_PRIVATE_STRIPE_API_KEY: string;
     NEXT_PRIVATE_STRIPE_WEBHOOK_SECRET: string;

apps/web/src/app/(dashboard)/settings/billing/billing-plans.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { useState } from 'react';
+
+import { AnimatePresence, motion } from 'framer-motion';
+
+import { PriceIntervals } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
+import { useIsMounted } from '@documenso/lib/client-only/hooks/use-is-mounted';
+import { toHumanPrice } from '@documenso/lib/universal/stripe/to-human-price';
+import { Button } from '@documenso/ui/primitives/button';
+import { Card, CardContent, CardTitle } from '@documenso/ui/primitives/card';
+import { Tabs, TabsList, TabsTrigger } from '@documenso/ui/primitives/tabs';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { createCheckout } from './create-checkout.action';
+
+type Interval = keyof PriceIntervals;
+
+const INTERVALS: Interval[] = ['day', 'week', 'month', 'year'];
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+const isInterval = (value: unknown): value is Interval => INTERVALS.includes(value as Interval);
+
+const FRIENDLY_INTERVALS: Record<Interval, string> = {
+  day: 'Daily',
+  week: 'Weekly',
+  month: 'Monthly',
+  year: 'Yearly',
+};
+
+const MotionCard = motion(Card);
+
+export type BillingPlansProps = {
+  prices: PriceIntervals;
+};
+
+export const BillingPlans = ({ prices }: BillingPlansProps) => {
+  const { toast } = useToast();
+
+  const isMounted = useIsMounted();
+
+  const [interval, setInterval] = useState<Interval>('month');
+  const [isFetchingCheckoutSession, setIsFetchingCheckoutSession] = useState(false);
+
+  const onSubscribeClick = async (priceId: string) => {
+    try {
+      setIsFetchingCheckoutSession(true);
+
+      const url = await createCheckout({ priceId });
+
+      if (!url) {
+        throw new Error('Unable to create session');
+      }
+
+      window.open(url);
+    } catch (_err) {
+      toast({
+        title: 'Something went wrong',
+        description: 'An error occurred while trying to create a checkout session.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsFetchingCheckoutSession(false);
+    }
+  };
+
+  return (
+    <div>
+      <Tabs value={interval} onValueChange={(value) => isInterval(value) && setInterval(value)}>
+        <TabsList>
+          {INTERVALS.map(
+            (interval) =>
+              prices[interval].length > 0 && (
+                <TabsTrigger key={interval} className="min-w-[150px]" value={interval}>
+                  {FRIENDLY_INTERVALS[interval]}
+                </TabsTrigger>
+              ),
+          )}
+        </TabsList>
+      </Tabs>
+
+      <div className="mt-8 grid gap-8 lg:grid-cols-2 2xl:grid-cols-3">
+        <AnimatePresence mode="wait">
+          {prices[interval].map((price) => (
+            <MotionCard
+              key={price.id}
+              initial={{ opacity: isMounted ? 0 : 1, y: isMounted ? 20 : 0 }}
+              animate={{ opacity: 1, y: 0, transition: { duration: 0.3 } }}
+              exit={{ opacity: 0, transition: { duration: 0.3 } }}
+            >
+              <CardContent className="flex h-full flex-col p-6">
+                <CardTitle>{price.product.name}</CardTitle>
+
+                <div className="text-muted-foreground mt-2 text-lg font-medium">
+                  ${toHumanPrice(price.unit_amount ?? 0)} {price.currency.toUpperCase()}{' '}
+                  <span className="text-xs">per {interval}</span>
+                </div>
+
+                <div className="text-muted-foreground mt-1.5 text-sm">
+                  {price.product.description}
+                </div>
+
+                {price.product.features && price.product.features.length > 0 && (
+                  <div className="text-muted-foreground mt-4">
+                    <div className="text-sm font-medium">Includes:</div>
+
+                    <ul className="mt-1 divide-y text-sm">
+                      {price.product.features.map((feature, index) => (
+                        <li key={index} className="py-2">
+                          {feature.name}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                )}
+
+                <div className="flex-1" />
+
+                <Button
+                  className="mt-4"
+                  loading={isFetchingCheckoutSession}
+                  onClick={() => void onSubscribeClick(price.id)}
+                >
+                  Subscribe
+                </Button>
+              </CardContent>
+            </MotionCard>
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+};

apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx

@@ -0,0 +1,55 @@
+'use client';
+
+import { useState } from 'react';
+
+import { Button } from '@documenso/ui/primitives/button';
+import { useToast } from '@documenso/ui/primitives/use-toast';
+
+import { createBillingPortal } from './create-billing-portal.action';
+
+export const BillingPortalButton = () => {
+  const { toast } = useToast();
+
+  const [isFetchingPortalUrl, setIsFetchingPortalUrl] = useState(false);
+
+  const handleFetchPortalUrl = async () => {
+    if (isFetchingPortalUrl) {
+      return;
+    }
+
+    setIsFetchingPortalUrl(true);
+
+    try {
+      const sessionUrl = await createBillingPortal();
+
+      if (!sessionUrl) {
+        throw new Error('NO_SESSION');
+      }
+
+      window.open(sessionUrl, '_blank');
+    } catch (e) {
+      let description =
+        'We are unable to proceed to the billing portal at this time. Please try again, or contact support.';
+
+      if (e.message === 'CUSTOMER_NOT_FOUND') {
+        description =
+          'You do not currently have a customer record, this should not happen. Please contact support for assistance.';
+      }
+
+      toast({
+        title: 'Something went wrong',
+        description,
+        variant: 'destructive',
+        duration: 10000,
+      });
+    }
+
+    setIsFetchingPortalUrl(false);
+  };
+
+  return (
+    <Button onClick={async () => handleFetchPortalUrl()} loading={isFetchingPortalUrl}>
+      Manage Subscription
+    </Button>
+  );
+};

apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts

@@ -0,0 +1,48 @@
+'use server';
+
+import {
+  getStripeCustomerByEmail,
+  getStripeCustomerById,
+} from '@documenso/ee/server-only/stripe/get-customer';
+import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+
+export const createBillingPortal = async () => {
+  const { user } = await getRequiredServerComponentSession();
+
+  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
+
+  let stripeCustomer: Stripe.Customer | null = null;
+
+  // Find the Stripe customer for the current user subscription.
+  if (existingSubscription) {
+    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
+
+    if (!stripeCustomer) {
+      throw new Error('Missing Stripe customer for subscription');
+    }
+  }
+
+  // Fallback to check if a Stripe customer already exists for the current user email.
+  if (!stripeCustomer) {
+    stripeCustomer = await getStripeCustomerByEmail(user.email);
+  }
+
+  // Create a Stripe customer if it does not exist for the current user.
+  if (!stripeCustomer) {
+    stripeCustomer = await stripe.customers.create({
+      name: user.name ?? undefined,
+      email: user.email,
+      metadata: {
+        userId: user.id,
+      },
+    });
+  }
+
+  return getPortalSession({
+    customerId: stripeCustomer.id,
+    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+  });
+};

apps/web/src/app/(dashboard)/settings/billing/create-checkout.action.ts

@@ -0,0 +1,59 @@
+'use server';
+
+import { getCheckoutSession } from '@documenso/ee/server-only/stripe/get-checkout-session';
+import {
+  getStripeCustomerByEmail,
+  getStripeCustomerById,
+} from '@documenso/ee/server-only/stripe/get-customer';
+import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
+import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
+import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
+
+export type CreateCheckoutOptions = {
+  priceId: string;
+};
+
+export const createCheckout = async ({ priceId }: CreateCheckoutOptions) => {
+  const { user } = await getRequiredServerComponentSession();
+
+  const existingSubscription = await getSubscriptionByUserId({ userId: user.id });
+
+  let stripeCustomer: Stripe.Customer | null = null;
+
+  // Find the Stripe customer for the current user subscription.
+  if (existingSubscription) {
+    stripeCustomer = await getStripeCustomerById(existingSubscription.customerId);
+
+    if (!stripeCustomer) {
+      throw new Error('Missing Stripe customer for subscription');
+    }
+
+    return getPortalSession({
+      customerId: stripeCustomer.id,
+      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+    });
+  }
+
+  // Fallback to check if a Stripe customer already exists for the current user email.
+  if (!stripeCustomer) {
+    stripeCustomer = await getStripeCustomerByEmail(user.email);
+  }
+
+  // Create a Stripe customer if it does not exist for the current user.
+  if (!stripeCustomer) {
+    stripeCustomer = await stripe.customers.create({
+      name: user.name ?? undefined,
+      email: user.email,
+      metadata: {
+        userId: user.id,
+      },
+    });
+  }
+
+  return getCheckoutSession({
+    customerId: stripeCustomer.id,
+    priceId,
+    returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
+  });
+};

apps/web/src/app/(dashboard)/settings/billing/page.tsx

@@ -1,16 +1,18 @@
-import Link from 'next/link';
 import { redirect } from 'next/navigation';
 
-import { createCustomer } from '@documenso/ee/server-only/stripe/create-customer';
-import { getPortalSession } from '@documenso/ee/server-only/stripe/get-portal-session';
+import { match } from 'ts-pattern';
+
+import { getPricesByInterval } from '@documenso/ee/server-only/stripe/get-prices-by-interval';
 import { getRequiredServerComponentSession } from '@documenso/lib/next-auth/get-server-session';
 import { getServerComponentFlag } from '@documenso/lib/server-only/feature-flags/get-server-component-feature-flag';
+import { Stripe, stripe } from '@documenso/lib/server-only/stripe';
 import { getSubscriptionByUserId } from '@documenso/lib/server-only/subscription/get-subscription-by-user-id';
-import { SubscriptionStatus } from '@documenso/prisma/client';
-import { Button } from '@documenso/ui/primitives/button';
 
 import { LocaleDate } from '~/components/formatter/locale-date';
 
+import { BillingPlans } from './billing-plans';
+import { BillingPortalButton } from './billing-portal-button';
+
 export default async function BillingSettingsPage() {
   const { user } = await getRequiredServerComponentSession();
 
@@ -21,57 +23,75 @@ export default async function BillingSettingsPage() {
     redirect('/settings/profile');
   }
 
-  const subscription = await getSubscriptionByUserId({ userId: user.id }).then(async (sub) => {
-    if (sub) {
-      return sub;
-    }
+  const [subscription, prices] = await Promise.all([
+    getSubscriptionByUserId({ userId: user.id }),
+    getPricesByInterval(),
+  ]);
 
-    // If we don't have a customer record, create one as well as an empty subscription.
-    return createCustomer({ user });
-  });
+  let subscriptionProduct: Stripe.Product | null = null;
 
-  let billingPortalUrl = '';
+  if (subscription?.planId) {
+    const foundSubscriptionProduct = (await stripe.products.list()).data.find(
+      (item) => item.default_price === subscription.planId,
+    );
 
-  if (subscription.customerId) {
-    billingPortalUrl = await getPortalSession({
-      customerId: subscription.customerId,
-      returnUrl: `${process.env.NEXT_PUBLIC_WEBAPP_URL}/settings/billing`,
-    });
+    subscriptionProduct = foundSubscriptionProduct ?? null;
   }
 
+  const isMissingOrInactiveOrFreePlan = !subscription || subscription.status === 'INACTIVE';
+
   return (
     <div>
       <h3 className="text-lg font-medium">Billing</h3>
 
-      <p className="text-muted-foreground mt-2 text-sm">
-        Your subscription is{' '}
-        {subscription.status !== SubscriptionStatus.INACTIVE ? 'active' : 'inactive'}.
-        {subscription?.periodEnd && (
-          <>
-            {' '}
-            Your next payment is due on{' '}
-            <span className="font-semibold">
-              <LocaleDate date={subscription.periodEnd} />
-            </span>
-            .
-          </>
+      <div className="text-muted-foreground mt-2 text-sm">
+        {isMissingOrInactiveOrFreePlan && (
+          <p>
+            You are currently on the <span className="font-semibold">Free Plan</span>.
+          </p>
         )}
-      </p>
+
+        {!isMissingOrInactiveOrFreePlan &&
+          match(subscription.status)
+            .with('ACTIVE', () => (
+              <p>
+                {subscriptionProduct ? (
+                  <span>
+                    You are currently subscribed to{' '}
+                    <span className="font-semibold">{subscriptionProduct.name}</span>
+                  </span>
+                ) : (
+                  <span>You currently have an active plan</span>
+                )}
+
+                {subscription.periodEnd && (
+                  <span>
+                    {' '}
+                    which is set to{' '}
+                    {subscription.cancelAtPeriodEnd ? (
+                      <span>
+                        end on{' '}
+                        <LocaleDate className="font-semibold" date={subscription.periodEnd} />.
+                      </span>
+                    ) : (
+                      <span>
+                        automatically renew on{' '}
+                        <LocaleDate className="font-semibold" date={subscription.periodEnd} />.
+                      </span>
+                    )}
+                  </span>
+                )}
+              </p>
+            ))
+            .with('PAST_DUE', () => (
+              <p>Your current plan is past due. Please update your payment information.</p>
+            ))
+            .otherwise(() => null)}
+      </div>
 
       <hr className="my-4" />
 
-      {billingPortalUrl && (
-        <Button asChild>
-          <Link href={billingPortalUrl}>Manage Subscription</Link>
-        </Button>
-      )}
-
-      {!billingPortalUrl && (
-        <p className="text-muted-foreground max-w-[60ch] text-base">
-          You do not currently have a customer record, this should not happen. Please contact
-          support for assistance.
-        </p>
-      )}
+      {isMissingOrInactiveOrFreePlan ? <BillingPlans prices={prices} /> : <BillingPortalButton />}
     </div>
   );
 }

apps/web/src/pages/api/stripe/webhook/index.ts

@@ -3,6 +3,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import { randomBytes } from 'crypto';
 import { readFileSync } from 'fs';
 import { buffer } from 'micro';
+import { match } from 'ts-pattern';
 
 import { insertImageInPDF } from '@documenso/lib/server-only/pdf/insert-image-in-pdf';
 import { insertTextInPDF } from '@documenso/lib/server-only/pdf/insert-text-in-pdf';
@@ -16,6 +17,7 @@ import {
   ReadStatus,
   SendStatus,
   SigningStatus,
+  SubscriptionStatus,
 } from '@documenso/prisma/client';
 
 const log = (...args: unknown[]) => console.log('[stripe]', ...args);
@@ -54,6 +56,18 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
   );
   log('event-type:', event.type);
 
+  if (event.type === 'customer.subscription.updated') {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const subscription = event.data.object as Stripe.Subscription;
+
+    await handleCustomerSubscriptionUpdated(subscription);
+
+    return res.status(200).json({
+      success: true,
+      message: 'Webhook received',
+    });
+  }
+
   if (event.type === 'checkout.session.completed') {
     // This is required since we don't want to create a guard for every event type
     // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
@@ -195,3 +209,29 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     message: 'Unhandled webhook event',
   });
 }
+
+const handleCustomerSubscriptionUpdated = async (subscription: Stripe.Subscription) => {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+  const { plan } = subscription as unknown as Stripe.SubscriptionItem;
+
+  const customerId =
+    typeof subscription.customer === 'string' ? subscription.customer : subscription.customer.id;
+
+  const status = match(subscription.status)
+    .with('active', () => SubscriptionStatus.ACTIVE)
+    .with('past_due', () => SubscriptionStatus.PAST_DUE)
+    .otherwise(() => SubscriptionStatus.INACTIVE);
+
+  await prisma.subscription.update({
+    where: {
+      customerId: customerId,
+    },
+    data: {
+      planId: plan.id,
+      status,
+      cancelAtPeriodEnd: subscription.cancel_at_period_end,
+      periodEnd: new Date(subscription.current_period_end * 1000),
+      updatedAt: new Date(),
+    },
+  });
+};