mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-04 21:04:37 +08:00
0532a18c36
## Summary The **Block new purchases** toggle on the Payments → Settings page was visually out of place: it rendered as a bare `SettingSwitch` outside the `max-w-3xl` settings column, while every neighboring setting (Stripe Connection, Test Mode, Payment Methods, Platform-Managed Methods) was a full-width `Card`. This PR wraps it in a `Card` that matches the existing `TestModeToggle` pattern so it inherits the same width constraint, border, padding, title/description structure, and state-colored icon badge. **File changed:** [`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/settings/page-client.tsx`](https://github.com/stack-auth/stack-auth/blob/fix/payments-block-new-purchases-card/apps/dashboard/src/app/(main)/(protected)/projects/%5BprojectId%5D/payments/settings/page-client.tsx) ## What was wrong Two concrete mismatches with the rest of the page: 1. **Wrong container.** The `SettingSwitch` was a direct child of `<PageLayout>` rather than the `<div className="space-y-6 max-w-3xl">` column that wraps the other settings — so it stretched to the full page width instead of the 3xl column and broke the vertical rhythm (no consistent `space-y-6` gap from the card above). 2. **Wrong style primitive.** It used the bare `SettingSwitch` row component instead of a `Card` + `CardHeader`/`CardTitle`/`CardDescription`/`CardContent` structure — so there was no border, no heading hierarchy, and no state-colored icon badge, which every other setting on the page has. ## Fix - Moved the block inside the `space-y-6 max-w-3xl` column so it's constrained and spaced like its siblings. - Replaced the `SettingSwitch` with a `Card` mirroring `TestModeToggle`: - `CardHeader` with `CardTitle` (\"Block New Purchases\") and `CardDescription` (\"Stops new checkouts while keeping existing subscriptions active.\"). - `CardContent` with an icon badge (`ProhibitIcon`) that turns red when blocking is active, plus a short \"Block new purchases\" label and the `Switch`. - Copy is intentionally minimal: one title, one sentence of description, one label next to the switch. No two-state narration. ## Visual comparison ### Pixel diff (changed pixels tinted red over the after image) 4.7% of pixels changed, all concentrated in the bottom of the settings column — everything else is pixel-identical, confirming the fix is scoped.  ### Cropped before/after toggle (zoomed to the changed region) Full-viewport comparisons are noisy when the delta is a single component at the bottom. This one is cropped to the changed bbox so the card fix is the whole frame — 1s before, 1s after, looped.  ### Wipe reveal (before on the left, after swept in from the left) A vertical red sweeps across the full page, revealing the after state over the before state. Useful for spotting any unintended drift elsewhere on the page (there is none).  ## Test plan - [ ] Open `/projects/<id>/payments/settings` in the dashboard. - [ ] Verify \"Block New Purchases\" renders as a `Card` with the same width as Stripe Connection / Test Mode / Payment Methods. - [ ] Toggle the switch on — icon badge turns red, config write fires (`payments.blockNewPurchases = true`, `pushable: true`). - [ ] Toggle off — icon returns to muted gray, config write fires with `false`. - [ ] Reload the page and confirm the persisted state matches the toggle. - [ ] `pnpm lint` and `pnpm typecheck` pass. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Improvements** * Redesigned the "Block New Purchases" toggle in payment settings with a new card-based interface and visual prohibit indicator for improved clarity and user experience. <!-- end of auto-generated comment: release notes by coderabbit.ai --> |
||
|---|---|---|
| .. | ||
| public | ||
| scripts | ||
| src | ||
| .env | ||
| .env.development | ||
| .eslintrc.cjs | ||
| .gitignore | ||
| .npmrc | ||
| components.json | ||
| DESIGN-GUIDE.md | ||
| instrumentation-client.ts | ||
| LICENSE | ||
| next.config.mjs | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.ts | ||
| tsconfig.json | ||
| vitest.config.ts | ||
