feat: add stripe portal

Author: G3root

src/components/billing/pricing/index.tsx

@@ -4,6 +4,7 @@ import { getStripeClient } from "@/client-only/stripe";
 import type { PricingPlanInterval, PricingType } from "@/prisma/enums";
 import { api } from "@/trpc/react";
 import type { RouterOutputs } from "@/trpc/shared";
+import { useRouter } from "next/navigation";
 import { useState } from "react";
 import { EmptyPlans } from "./empty-plans";
 import { PricingButton } from "./pricing-button";
@@ -24,6 +25,7 @@ interface handleStripeCheckoutOptions {
 }
 
 function Plans({ products, subscription }: PricingProps) {
+  const router = useRouter();
   const intervals = Array.from(
     new Set(
       products.flatMap((product) =>
@@ -43,6 +45,12 @@ function Plans({ products, subscription }: PricingProps) {
     },
   });
 
+  const { mutateAsync: stripePortal } = api.billing.stripePortal.useMutation({
+    onSuccess: ({ url }) => {
+      router.push(url);
+    },
+  });
+
   const handleBilling = (interval: PricingPlanInterval) => {
     setBillingInterval(interval);
   };
@@ -55,6 +63,10 @@ function Plans({ products, subscription }: PricingProps) {
     setPriceIdLoading(undefined);
   };
 
+  const handleBillingPortal = async () => {
+    await stripePortal();
+  };
+
   return (
     <div>
       <div className="inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground">
@@ -98,13 +110,18 @@ function Plans({ products, subscription }: PricingProps) {
               price={priceString}
               interval={billingInterval}
               subscribed={!!subscription}
-              onClick={() =>
-                handleStripeCheckout({
+              onClick={() => {
+                if (subscription) {
+                  return handleBillingPortal();
+                }
+                return handleStripeCheckout({
                   priceId: price.id,
                   priceType: price.type,
-                })
-              }
+                });
+              }}
               loading={priceIdLoading === price.id}
+              subscribedUnitAmount={subscription?.price.unitAmount}
+              unitAmount={unitAmount}
             />
           );
         })}

src/components/billing/pricing/pricing-card.tsx

@@ -16,6 +16,8 @@ interface PricingCardProps extends Omit<ButtonProps, "children"> {
   interval: PricingPlanInterval;
   subscribed: boolean;
   active: boolean;
+  subscribedUnitAmount?: bigint | null;
+  unitAmount: number;
 }
 
 const humanizedInterval: Record<PricingPlanInterval, string> = {
@@ -32,8 +34,13 @@ export function PricingCard({
   price,
   subscribed,
   active,
+  subscribedUnitAmount: subscribedUnitAmount_,
+  unitAmount,
   ...rest
 }: PricingCardProps) {
+  const subscribedUnitAmount = subscribedUnitAmount_
+    ? Number(subscribedUnitAmount_)
+    : null;
   return (
     <Card>
       <CardHeader>
@@ -47,7 +54,15 @@ export function PricingCard({
         <CardDescription>{description}</CardDescription>
       </CardHeader>
       <CardFooter>
-        <Button {...rest}>{subscribed ? "Manage" : "Subscribe"}</Button>
+        <Button {...rest}>
+          {subscribedUnitAmount
+            ? subscribedUnitAmount < unitAmount
+              ? "Upgrade Plan"
+              : subscribedUnitAmount > unitAmount
+                ? "Downgrade Plan"
+                : "Manage Current Plan"
+            : "Subscribe"}
+        </Button>
       </CardFooter>
     </Card>
   );

src/trpc/routers/billing-router/procedures/get-subscription.ts

@@ -35,6 +35,7 @@ export const getSubscriptionProcedure = withAuth.query(async ({ ctx }) => {
                 name: true,
               },
             },
+            unitAmount: true,
           },
         },
       },