Bug Fix: Manage Billing Button Returning 404 in Settings

Version: 1.0.32
Severity: High — feature completely non-functional
Status: Resolved

---

What Happened

In the Settings page (src/app/dashboard/settings/page.tsx, line 28), the "Manage Billing" button was rendered as a plain HTML anchor tag pointing to /api/billing/portal:

// Before (broken)
<a href="/api/billing/portal">Manage Billing</a>

This HTTP route (/api/billing/portal) does not exist anywhere in the application — there is no file under src/app/api/billing/. As a result, every user who clicked "Manage Billing" in Settings received a 404 Not Found response and was unable to access the billing portal.

---

Root Cause

The button relied on a hardcoded route path that was never implemented as an API handler. The rest of the application uses tRPC mutations for actions like this; this button was inconsistent with that pattern and referenced a non-existent REST endpoint.

---

What Changed

The hardcoded anchor tag has been replaced with a client component that uses the existing trpc.billing.createBillingPortal mutation. On success, the component redirects the user to the URL returned by the mutation — which is the actual billing portal URL from the billing provider.

// After (fixed)
// Client component using tRPC mutation
const { mutate: openBillingPortal, isLoading } =
  trpc.billing.createBillingPortal.useMutation({
    onSuccess: (data) => {
      window.location.href = data.url;
    },
  });

<button onClick={() => openBillingPortal()} disabled={isLoading}>
  {isLoading ? 'Redirecting...' : 'Manage Billing'}
</button>

This approach:

• Is consistent with the rest of the application's data-fetching and mutation patterns.
• Correctly invokes the billing provider integration through the existing tRPC router.
• Handles loading state to prevent double-clicks during redirect.

---

Who Is Affected

All users who attempted to manage their billing subscription from the Settings page in versions prior to 1.0.32. No data loss occurred — the button simply failed to navigate.

---

Action Required

No action is required from users or administrators. Update to v1.0.32 to restore billing portal access from the Settings page.

If you have any internal tooling or scripts that reference /api/billing/portal directly, update those to call the trpc.billing.createBillingPortal mutation endpoint instead.