mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-30 21:01:54 +08:00
## Problem
The demo's `payments-demo` page white-screens on load with:
```
Item with ID "emails_per_month" not found. (KnownError.fromJson)
```
## Root cause
The demo runs (via the CLI `dev` / development-environment flow) against
an auto-created **Development Environment Project**, which is
provisioned from `examples/demo/hexclave.config.ts`. That config
declares items `api_calls` / `seats` and products `pro` / `team_pro` /
`extra_seats`.
But the demo **code** still referenced the **internal** project's plan
catalog from `@hexclave/shared/plans` — `emails_per_month`, products
`team` / `growth`, `PLAN_LIMITS`, `resolvePlanId`. None of those exist
in the demo's own config, so `team.useItem("emails_per_month")` threw
`ItemNotFound` and crashed the whole page.
Confirmed by dumping the live rendered config
(`tenancy.config.payments`, the exact path the SDK reads) for the
dev-environment project: items `["seats","api_calls"]`, products
`["pro","team_pro","extra_seats"]` — no `emails_per_month`. The
`internal` project's config is healthy and unrelated; this is purely
demo code drift from its own config file.
## Fix
Align the demo code with its own `hexclave.config.ts` (the CLI's
declared source of truth):
- `useItem("seats")` + seat metrics instead of email-quota metrics
- Buy `team_pro` / `extra_seats` instead of `team` / `growth`
- Local `resolveTeamPlan()` instead of `resolvePlanId()` / `PLAN_LIMITS`
- `create-checkout-url` + `config-check` routes updated to the new
catalog
- Copy updates (header, "Free plan" note, manual-end-test instructions)
No backend or provisioning changes — the dev-environment project already
had the correct catalog; only the demo code was stale.
## Verification
- `pnpm --filter @hexclave/example-demo-app typecheck` — pass
- `pnpm --filter @hexclave/example-demo-app lint` — pass
- Demo page loads cleanly: team card renders (active plan "none", 0
seats granted/available), **Buy Team Pro** / **Buy Extra Seat (add-on)**
buttons present, no crash.
## Note
The demo is treated here as a generic SaaS example (its
`hexclave.config.ts` is the curated source of truth). If the intent was
instead for the demo to exercise the internal project's real plans +
email-quota, the alternative fix would be to update `hexclave.config.ts`
rather than the demo code.
<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes the payments demo white-screen by aligning it with its own
`hexclave.config.ts` catalog. The page now loads and uses seat-based
metrics and the correct product IDs.
- **Bug Fixes**
- Use `seats` item and seat metrics; drop
`emails_per_month`/`PLAN_LIMITS`/`resolvePlanId` from
`@hexclave/shared/plans` in favor of a local `resolveTeamPlan()`.
- Switch checkout product IDs to `team_pro` and `extra_seats`; update
API validation, labels, and copy.
- Update `config-check` to expect `api_calls`, `seats`, and
`teamProSeats: 25`.
<sup>Written for commit
|
||
|---|---|---|
| .. | ||
| cjs-test | ||
| convex | ||
| demo | ||
| docs-examples | ||
| e-commerce | ||
| js-example | ||
| lovable-react-18-example | ||
| middleware | ||
| react-example | ||
| supabase | ||
| tanstack-start-demo | ||