Stripe cleanup

Author: jorgebaralt

.env.example

@@ -28,3 +28,8 @@ OPENAI_API_KEY="<OPENAI_API_KEY>"
 
 # Public URL of the web app. In preview URLs it should be `PUBLIC_WEB_URL=https://$NEXT_PUBLIC_VERCEL_URL`.
 PUBLIC_WEB_URL="<YOUR_PUBLIC_WEB_URL>"
+
+# Stripe
+STRIPE_SECRET_KEY="<STRIPE_SECRET_KEY>"
+STRIPE_WEBHOOK_SECRET="<STRIPE_WEBHOOK_SECRET>"
+STRIPE_WEBHOOK_PORT="<STRIPE_WEBHOOK_PORT>"

apps/stripe-listener/package.json

@@ -1,11 +1,18 @@
 {
-  "name": "@acme/stripe-listener",
+  "name": "@acme/stripe",
   "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "clean": "git clean -xdf .cache .turbo node_modules tsconfig.tsbuildinfo",
-    "dev": "stripe listen --forward-to localhost:3000/api/auth/stripe/webhook",
-    "typecheck": "echo 'No TypeScript files to check in stripe-listener'"
+    "dev": "pnpm with-env sh -c 'stripe listen --forward-to localhost:$STRIPE_WEBHOOK_PORT/api/auth/stripe/webhook'",
+    "typecheck": "tsc --noEmit",
+    "with-env": "dotenv -e ../../.env --"
+  },
+  "devDependencies": {
+    "@acme/tsconfig": "workspace:*",
+    "@t3-oss/env-nextjs": "^0.13.6",
+    "dotenv-cli": "^8.0.0",
+    "zod": "^3.25.71"
   }
 }

apps/stripe-listener/src/env.ts

@@ -0,0 +1,25 @@
+import { createEnv } from "@t3-oss/env-nextjs";
+import { z } from "zod";
+
+export const env = createEnv({
+  /**
+   * Destructure all variables from `process.env` to make sure they aren't tree-shaken away.
+   */
+  experimental__runtimeEnv: {
+    NODE_ENV: process.env.NODE_ENV,
+  },
+  /**
+   * Specify your server-side environment variables schema here.
+   * This way you can ensure the app isn't built with invalid env vars.
+   */
+  server: {
+    STRIPE_WEBHOOK_PORT: z.string().transform(Number).default("3000"),
+  },
+  shared: {
+    NODE_ENV: z
+      .enum(["development", "production", "test"])
+      .default("development"),
+  },
+  skipValidation:
+    !!process.env.CI || process.env.npm_lifecycle_event === "lint",
+});

apps/stripe-listener/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tooling/tsconfig/tsconfig.nodejs.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

apps/web/src/app/(app)/(billing)/subscription/_components/subscription-manage-button.tsx

@@ -1,12 +1,12 @@
 "use client";
 
 import type { ActiveSubscription } from "@acme/api";
-import { usePathname } from "next/navigation";
+import { useMutation } from "@tanstack/react-query";
+import { redirect, usePathname } from "next/navigation";
 import type { ComponentProps } from "react";
-import { useState } from "react";
 import { toast } from "sonner";
-import { authClient } from "~/auth/client";
 import { Button } from "~/components/ui/button";
+import { useTRPC } from "~/trpc/react";
 
 export const SubscriptionManageButton = ({
   activeSubscription,
@@ -17,35 +17,32 @@ export const SubscriptionManageButton = ({
   activeSubscription: ActiveSubscription;
 } & ComponentProps<typeof Button>) => {
   const pathname = usePathname();
-  const { data: sessionData } = authClient.useSession();
-  const [isLoading, setIsLoading] = useState(false);
+  const trpc = useTRPC();
+
+  const { mutateAsync: openBillingPortal, isPending } = useMutation(
+    trpc.subscription.openBillingPortal.mutationOptions({
+      onError: (error) => {
+        toast.error(error.message || "Failed to open billing portal");
+      },
+    }),
+  );
 
   if (!activeSubscription) {
     return null;
   }
 
   const handleClick = async (event: React.MouseEvent<HTMLButtonElement>) => {
-    setIsLoading(true);
-
-    if (!sessionData?.user?.id) {
-      toast.error("Please sign in to manage your subscription");
-      return;
-    }
-
-    const result = await authClient.subscription.billingPortal({
-      locale: "en",
-      referenceId: sessionData.user.id,
+    const res = await openBillingPortal({
       returnUrl: pathname,
     });
-
-    if (result.error) {
-      console.error("Billing portal error:", result.error);
-      toast.error("Failed to open billing portal. Please try again.");
-    }
-
     // Call the custom onClick handler if provided
     onClick?.(event);
-    setIsLoading(false);
+
+    if (res.url) {
+      redirect(res.url);
+    } else {
+      toast.error("Failed to create billing portal session");
+    }
   };
 
   return (
@@ -54,7 +51,7 @@ export const SubscriptionManageButton = ({
       size="sm"
       className="rounded-lg bg-black text-white"
       variant="outline"
-      disabled={isLoading}
+      disabled={isPending}
       {...buttonProps}
     >
       {children}

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-user-settings.tsx

@@ -14,9 +14,9 @@ export function AppSidebarUserSettings() {
     setCancelUrl(pathname);
 
     // Add a small delay to allow the dropdown to close before navigation
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       router.push("/auth/settings");
-    }, 150);
+    });
   };
 
   return (

apps/web/src/app/(app)/@billingModal/(.)subscription/_components/subscription-modal.tsx

@@ -1,23 +1,16 @@
 "use client";
 
-import { usePathname, useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
 import { Dialog } from "~/components/ui/dialog";
-import { BillingErrorBoundary } from "../../_components/billing-error-boundary";
 
 export const SubscriptionModal = ({
   children,
 }: {
   children: React.ReactNode;
 }) => {
-  const pathname = usePathname();
   const router = useRouter();
-  const [isOpen, setIsOpen] = useState(false);
-
-  // Use effect to prevent hydration mismatch and flashing
-  useEffect(() => {
-    setIsOpen(pathname === "/subscription");
-  }, [pathname]);
+  const [isOpen, setIsOpen] = useState(true);
 
   const handleOpenChange = (open: boolean) => {
     if (!open) {
@@ -28,7 +21,7 @@ export const SubscriptionModal = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <BillingErrorBoundary>{children}</BillingErrorBoundary>
+      {children}
     </Dialog>
   );
 };

apps/web/src/app/(app)/@billingModal/_components/billing-error-boundary.tsx

@@ -3,6 +3,7 @@
 import { useEffect } from "react";
 import { Button } from "~/components/ui/button";
 import {
+  Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
@@ -20,26 +21,28 @@ export default function BillingModalError({
   }, [error]);
 
   return (
-    <DialogContent>
-      <DialogHeader>
-        <DialogTitle>Billing Error</DialogTitle>
-      </DialogHeader>
-      <div className="space-y-4">
-        <p className="text-muted-foreground">
-          We encountered an error while loading your billing information.
-        </p>
-        <div className="flex justify-end space-x-2">
-          <Button
-            variant="outline"
-            onClick={() => {
-              window.location.href = "/";
-            }}
-          >
-            Go Home
-          </Button>
-          <Button onClick={reset}>Try Again</Button>
+    <Dialog open={true}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Billing Error</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <p className="text-muted-foreground">
+            We encountered an error while loading your billing information.
+          </p>
+          <div className="flex justify-end space-x-2">
+            <Button
+              variant="outline"
+              onClick={() => {
+                window.location.href = "/";
+              }}
+            >
+              Go Home
+            </Button>
+            <Button onClick={reset}>Try Again</Button>
+          </div>
         </div>
-      </div>
-    </DialogContent>
+      </DialogContent>
+    </Dialog>
   );
 }

apps/web/src/app/(app)/@billingModal/error.tsx

@@ -21,7 +21,7 @@ export default function ChatSidebar() {
       side="right"
       collapsible="offcanvas"
       variant="floating"
-      className="sticky top-0 z-10 h-svh"
+      className="sticky top-0 h-svh"
       defaultWidth={CHAT_SIDEBAR_DEFAULT_WIDTH}
       minWidth={CHAT_SIDEBAR_MIN_WIDTH}
       maxWidth={CHAT_SIDEBAR_WIDTH_MAX}