Merge pull request #389 from captableinc/fix-stripe-ux

feat: improve stripe billing ui/ux

Author: dahal

src/app/(authenticated)/(dashboard)/[publicId]/settings/billing/page.tsx

@@ -1,4 +1,4 @@
-import { Pricing } from "@/components/billing/pricing";
+import { PlanDetails } from "@/components/billing/plan-details";
 import { PageLayout } from "@/components/dashboard/page-layout";
 import { api } from "@/trpc/server";
 import type { Metadata } from "next";
@@ -14,7 +14,7 @@ const BillingPage = async () => {
 
   return (
     <PageLayout title="Billing" description="manage your billing">
-      <Pricing products={products} subscription={subscription} />
+      <PlanDetails products={products} subscription={subscription} />
     </PageLayout>
   );
 };

src/app/api/stripe/webhook/route.ts

@@ -84,16 +84,20 @@ export async function POST(req: Request) {
       }
     } catch (error) {
       console.log(error);
+      // We dealing with webhooks return a 200 to acknowledge receipt of the event
       return new Response(
         "Webhook handler failed. View your Next.js function logs.",
         {
-          status: 400,
+          status: 200,
         },
       );
     }
   } else {
+    console.log(`❌  Unhandled event type: ${event.type}`);
+
+    // We dealing with webhooks return a 200 to acknowledge receipt of the event
     return new Response(`Unsupported event type: ${event.type}`, {
-      status: 400,
+      status: 200,
     });
   }
   return new Response(JSON.stringify({ received: true }));

src/components/billing/plan-details/index.tsx

@@ -0,0 +1,46 @@
+import { dayjsExt } from "@/common/dayjs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { badgeVariants } from "@/components/ui/badge";
+import { buttonVariants } from "@/components/ui/button";
+import Link from "next/link";
+import { PricingModal, type PricingModalProps } from "../pricing-modal";
+
+interface PlanDetailsProps extends PricingModalProps {}
+
+export function PlanDetails({ subscription, products }: PlanDetailsProps) {
+  return (
+    <div>
+      <Alert>
+        <AlertTitle>Plan Details</AlertTitle>
+        <AlertDescription>
+          <div className="flex flex-col gap-y-3">
+            <p>
+              You are currently on the{" "}
+              <span className={badgeVariants()}>
+                {subscription ? subscription.price.product.name : "Free"}
+              </span>{" "}
+              plan.{" "}
+              {subscription ? (
+                <>
+                  Current billing cycle:{" "}
+                  {dayjsExt(subscription?.currentPeriodStart).format("ll")} -{" "}
+                  {dayjsExt(subscription?.currentPeriodEnd).format("ll")}
+                </>
+              ) : null}
+            </p>
+
+            <div className="flex items-center justify-center">
+              <Link
+                className={buttonVariants({ variant: "secondary" })}
+                href="?upgrade=true"
+              >
+                Upgrade or manage plans
+              </Link>
+              <PricingModal subscription={subscription} products={products} />
+            </div>
+          </div>
+        </AlertDescription>
+      </Alert>
+    </div>
+  );
+}

src/components/billing/pricing/empty-plans.tsx renamed to src/components/billing/pricing-modal/empty-plans.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { getStripeClient } from "@/client-only/stripe";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import type { PricingPlanInterval, PricingType } from "@/prisma/enums";
+import { api } from "@/trpc/react";
+import type { TypeZodStripePortalMutationSchema } from "@/trpc/routers/billing-router/schema";
+import type { RouterOutputs } from "@/trpc/shared";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect, useState } from "react";
+import { EmptyPlans } from "./empty-plans";
+import { PricingButton } from "./pricing-button";
+import { PricingCard } from "./pricing-card";
+
+type Products = RouterOutputs["billing"]["getProducts"]["products"];
+type TSubscription =
+  RouterOutputs["billing"]["getSubscription"]["subscription"];
+
+interface PricingProps {
+  products: Products;
+  subscription: TSubscription;
+}
+
+interface handleStripeCheckoutOptions {
+  priceId: string;
+  priceType: PricingType;
+}
+
+function Plans({ products, subscription }: PricingProps) {
+  const router = useRouter();
+  const intervals = Array.from(
+    new Set(
+      products.flatMap((product) =>
+        product?.prices?.map((price) => price?.interval),
+      ),
+    ),
+  );
+  const [billingInterval, setBillingInterval] =
+    useState<PricingPlanInterval>("month");
+
+  const { mutateAsync: checkoutWithStripe, isLoading: checkoutLoading } =
+    api.billing.checkout.useMutation({
+      onSuccess: async ({ stripeSessionId }) => {
+        const stripe = await getStripeClient();
+        await stripe?.redirectToCheckout({ sessionId: stripeSessionId });
+      },
+    });
+
+  const { mutateAsync: stripePortal, isLoading: stripePortalLoading } =
+    api.billing.stripePortal.useMutation({
+      onSuccess: ({ url }) => {
+        router.push(url);
+      },
+    });
+
+  const handleBilling = (interval: PricingPlanInterval) => {
+    setBillingInterval(interval);
+  };
+
+  const handleStripeCheckout = async (price: handleStripeCheckoutOptions) => {
+    await checkoutWithStripe(price);
+  };
+
+  const handleBillingPortal = async (
+    data: TypeZodStripePortalMutationSchema,
+  ) => {
+    await stripePortal(data);
+  };
+
+  const isSubmitting = checkoutLoading || stripePortalLoading;
+
+  return (
+    <div className="flex flex-col items-center justify-center">
+      <div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
+        {intervals.includes("month") && (
+          <PricingButton
+            onClick={() => handleBilling("month")}
+            active={billingInterval === "month"}
+            label="monthly"
+          />
+        )}
+        {intervals.includes("year") && (
+          <PricingButton
+            onClick={() => handleBilling("year")}
+            active={billingInterval === "year"}
+            label="yearly"
+          />
+        )}
+      </div>
+
+      <section className="flex flex-col sm:flex-row sm:flex-wrap gap-8 pt-8">
+        <PricingCard
+          title="Free"
+          description=""
+          price="$0"
+          interval="month"
+          subscribedUnitAmount={subscription?.price.unitAmount}
+          unitAmount={0}
+          isSubmitting={isSubmitting}
+          {...(subscription && {
+            handleClick: () => {
+              return handleBillingPortal({
+                type: "cancel",
+                subscription: subscription.id,
+              });
+            },
+          })}
+        />
+        {products.map((product) => {
+          const price = product?.prices?.find(
+            (price) => price.interval === billingInterval,
+          );
+          if (!price) return null;
+
+          const unitAmount = Number(price?.unitAmount) ?? 0;
+
+          const priceString = new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: price.currency,
+            minimumFractionDigits: 0,
+          }).format(unitAmount / 100);
+
+          const active = subscription?.priceId === price.id;
+          return (
+            <PricingCard
+              key={product.id}
+              title={product.name}
+              description={product.description}
+              price={priceString}
+              interval={billingInterval}
+              handleClick={() => {
+                if (subscription) {
+                  return handleBillingPortal({
+                    ...(active
+                      ? {
+                          type: "cancel",
+                          subscription: subscription.id,
+                        }
+                      : {
+                          type: "update",
+                          subscription: subscription.id,
+                        }),
+                  });
+                }
+                return handleStripeCheckout({
+                  priceId: price.id,
+                  priceType: price.type,
+                });
+              }}
+              subscribedUnitAmount={subscription?.price.unitAmount}
+              unitAmount={unitAmount}
+              isSubmitting={isSubmitting}
+            />
+          );
+        })}
+      </section>
+    </div>
+  );
+}
+
+export function Pricing({ products, subscription }: PricingProps) {
+  return products.length ? (
+    <Plans products={products} subscription={subscription} />
+  ) : (
+    <EmptyPlans />
+  );
+}
+
+export type PricingModalProps = PricingProps;
+
+export function PricingModal({ products, subscription }: PricingModalProps) {
+  const [open, setOpen] = useState(false);
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const path = usePathname();
+  const upgrade = searchParams.get("upgrade");
+
+  useEffect(() => {
+    const isOpen = upgrade === "true";
+    if (isOpen) {
+      setOpen(true);
+    }
+    return () => {
+      setOpen(false);
+    };
+  }, [upgrade]);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={() => {
+        router.push(path);
+      }}
+    >
+      <DialogContent className="max-w-[95vw]">
+        <DialogHeader className="flex items-center justify-center">
+          <DialogTitle>Upgrade or manage plans</DialogTitle>
+        </DialogHeader>
+        <div className="overflow-scroll no-scrollbar max-h-[80vh]">
+          <Pricing products={products} subscription={subscription} />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/components/billing/pricing-modal/index.tsx

@@ -0,0 +1,91 @@
+import { Button, type ButtonProps } from "@/components/ui/button";
+import {
+  Card,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import type { PricingPlanInterval } from "@/prisma/enums";
+import { useState } from "react";
+
+interface PricingCardProps {
+  title: string;
+  description?: string | null;
+  price: string;
+  interval: PricingPlanInterval;
+  subscribedUnitAmount?: bigint | null;
+  unitAmount: number;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  handleClick?: () => Promise<any>;
+  isSubmitting: boolean;
+}
+
+const humanizedInterval: Record<PricingPlanInterval, string> = {
+  day: "Daily",
+  month: "Monthly",
+  week: "Weekly",
+  year: "Yearly",
+};
+
+export function PricingCard({
+  description,
+  title,
+  interval,
+  price,
+  subscribedUnitAmount: subscribedUnitAmount_,
+  unitAmount,
+  handleClick,
+  isSubmitting,
+}: PricingCardProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const subscribedUnitAmount = subscribedUnitAmount_
+    ? Number(subscribedUnitAmount_)
+    : null;
+
+  const active = unitAmount === subscribedUnitAmount;
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="text-lg">{title}</CardTitle>
+        <div className="flex gap-0.5">
+          <h3 className="text-3xl font-bold">{price}</h3>
+          {unitAmount !== 0 && (
+            <span className="flex flex-col justify-end text-sm mb-1">
+              /{humanizedInterval[interval]}
+            </span>
+          )}
+        </div>
+        <CardDescription>{description}</CardDescription>
+      </CardHeader>
+      <CardFooter>
+        <Button
+          className={cn(!active && "bg-teal-500 hover:bg-teal-500/80")}
+          {...(active && { variant: "destructive" })}
+          onClick={async () => {
+            if (handleClick) {
+              setIsLoading(true);
+              await handleClick();
+              setIsLoading(false);
+            }
+          }}
+          loading={isLoading}
+          {...(!isLoading && { disabled: isSubmitting })}
+          {...(unitAmount === 0 && !subscribedUnitAmount && { disabled: true })}
+        >
+          {subscribedUnitAmount
+            ? unitAmount < subscribedUnitAmount
+              ? "Downgrade Plan"
+              : unitAmount > subscribedUnitAmount
+                ? "Upgrade Plan"
+                : "Cancel Current Plan"
+            : !subscribedUnitAmount && unitAmount === 0
+              ? "Active plan"
+              : "Subscribe"}
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+}