feat: add free tier Stripe subscription

2025-11-17 10:11:35 +10:00 · 2023-09-18 22:33:07 +10:00
parent 5a79535080
commit 2856cd9c15
12 changed files with 296 additions and 57 deletions
--- a/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/billing-portal-button.tsx
@ -0,0 +1,54 @@
+'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 default function 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>
+  );
+}
--- a/apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts
+++ b/apps/web/src/app/(dashboard)/settings/billing/create-billing-portal.action.ts
@ -0,0 +1,80 @@
+'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';
+import { prisma } from '@documenso/prisma';
+
+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.
+  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,
+      },
+    });
+  }
+
+  const stripeCustomerSubsriptions = stripeCustomer.subscriptions?.data ?? [];
+
+  // Create a free subscription for user if it does not exist.
+  if (!existingSubscription && stripeCustomerSubsriptions.length === 0) {
+    const newSubscription = await stripe.subscriptions.create({
+      customer: stripeCustomer.id,
+      items: [
+        {
+          plan: process.env.NEXT_PUBLIC_STRIPE_FREE_PLAN_ID,
+        },
+      ],
+    });
+
+    await prisma.subscription.upsert({
+      where: {
+        userId: user.id,
+        customerId: stripeCustomer.id,
+      },
+      create: {
+        userId: user.id,
+        customerId: stripeCustomer.id,
+        planId: process.env.NEXT_PUBLIC_STRIPE_FREE_PLAN_ID,
+        periodEnd: new Date(newSubscription.current_period_end * 1000),
+        status: 'ACTIVE',
+      },
+      update: {
+        planId: process.env.NEXT_PUBLIC_STRIPE_FREE_PLAN_ID,
+        periodEnd: new Date(newSubscription.current_period_end * 1000),
+        status: 'ACTIVE',
+      },
+    });
+  }
+
+  return getPortalSession({
+    customerId: stripeCustomer.id,
+    returnUrl: `${process.env.NEXT_PUBLIC_APP_URL}/settings/billing`,
+  });
+};
--- a/apps/web/src/app/(dashboard)/settings/billing/page.tsx
+++ b/apps/web/src/app/(dashboard)/settings/billing/page.tsx
@ -1,16 +1,15 @@
-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 { 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 BillingPortalButton from './billing-portal-button';
+
 export default async function BillingSettingsPage() {
  const { user } = await getRequiredServerComponentSession();

@ -21,57 +20,74 @@ export default async function BillingSettingsPage() {
    redirect('/settings/profile');
  }

-  const subscription = await getSubscriptionByUserId({ userId: user.id }).then(async (sub) => {
-    if (sub) {
-      return sub;
-    }
+  const subscription = await getSubscriptionByUserId({ userId: user.id });

-    // 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' ||
+    subscription?.planId === process.env.NEXT_PUBLIC_STRIPE_FREE_PLAN_ID;
+
  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="mt-2 text-sm text-slate-500">
+        {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>
-      )}
+      <BillingPortalButton />
    </div>
  );
 }