Payments app design fixes#1375
Open
Developing-Gamer wants to merge 54 commits into
Open
Conversation
Introduce a canonical dialog surface with structured header/body/footer slots and styling controls so feature pages can reuse a consistent modal foundation. Made-with: Cursor
Expose the new dialog component and related helper types from the package root so dashboard pages can import the shared modal API consistently. Made-with: Cursor
Add guidance for when and how to use DesignDialog so modal redesign work follows a single documented pattern across dashboard routes. Made-with: Cursor
Replace the hand-wired trigger history dialog chrome with the shared DesignDialog wrapper while preserving the existing summary header and trigger list behavior. Made-with: Cursor
Show confirmation, rich-header, tester, and parity examples so agents and developers can copy the shared modal patterns directly. Made-with: Cursor
Introduce a dedicated dialog playground entry with shape presets and generated snippets to make modal experimentation and reuse easier. Made-with: Cursor
Ensures popover content receives pointer events consistently in stack-ui and the dashboard shadcn wrapper. Made-with: Cursor
Split hover, focus, and data-[highlighted] so keyboard navigation matches pointer hover for menu and select items. Made-with: Cursor
Payments product flows use the updated repeating list behavior and styling. Made-with: Cursor
Aligns the payments item dialog with the new form and popover patterns. Made-with: Cursor
Applies the updated UI patterns to the product line creation flow. Made-with: Cursor
Refactors included item editing to match the new dialog and input UX. Made-with: Cursor
Aligns price editing with the shared dialog and form components. Made-with: Cursor
Wires the new product flow to the refactored dialogs and pricing UI. Made-with: Cursor
Replace generic Card layout with DesignCard, shared StatusRow, and DesignBadge/DesignButton for consistent status styling across not connected, incomplete setup, and connected states. Made-with: Cursor
Use DesignCard with gradient by state and DesignBadge for the test-mode feature list when active, matching the updated payments settings visuals. Made-with: Cursor
Swap Card for DesignCard, move save/cancel into card actions, refine rows and accordions, and add a Modified badge for pending toggles on controllable and platform-managed sections. Made-with: Cursor
Replace SettingSwitch with a DesignCard, optimistic Switch updates, and tighter section spacing to match the rest of the payments settings page. Made-with: Cursor
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis PR introduces ChangesDesignDialog Component Foundation & Documentation
Remove Legacy Include-by-Default Pricing Sentinel
Dialog Migrations in Payments UI
Dialog Migrations Across Dashboard Pages
Payment Pages Design System Updates
Base UI Primitives & Minor Updates
🎯 4 (Complex) | ⏱️ ~60 minutes Possibly Related PRs
Suggested Reviewers
✨ Finishing Touches🧪 Generate unit tests (beta)
|
Contributor
Greptile SummaryThis PR migrates dashboard payment and auth pages to a new design-component system (
Confidence Score: 5/5Safe to merge; the logic changes are well-scoped and the new conversations feature follows established patterns. The payments switch refactor correctly moves the free-plan check earlier without altering downstream authorization. All new conversation routes use createSmartRouteHandler and properly scope reads through viewerProjectUserId. The design migration is additive. The only finding is a redundant direct-source-path re-export that is currently harmless but could diverge in a production build. apps/dashboard/src/components/design-components/index.ts — redundant cross-package source import that duplicates what the package index already exports. Important Files Changed
Sequence DiagramsequenceDiagram
participant U as End User
participant DU as Dashboard UI (dogfood routes)
participant DI as Dashboard Internal (admin routes)
participant CL as conversations.tsx lib
participant DB as PostgreSQL
Note over DU,DB: User-facing conversation flow
U->>DU: POST /dogfood/support/conversations (subject, message)
DU->>CL: createConversation(tenancyId, userId, ...)
CL->>DB: INSERT Conversation + ConversationEntryPoint + ConversationMessage
DU-->>U: "{ conversation_id }"
U->>DU: PATCH /dogfood/support/conversations/:id (message)
DU->>CL: "appendConversationMessage(viewerProjectUserId=userId, ...)"
CL->>DB: "SELECT Conversation WHERE projectUserId=viewerProjectUserId (auth gate)"
CL->>DB: INSERT ConversationMessage + UPDATE Conversation timestamps
DU-->>U: updated conversation detail
Note over DI,DB: Admin / support-agent flow
DI->>CL: listConversationSummaries(tenancyId, status?, userId?)
CL->>DB: SELECT with LEFT JOIN ProjectUser for display name/email
DI-->>DI: agent replies / status changes / metadata updates
DI->>CL: updateConversationStatus / appendConversationMessage (agent sender)
CL->>DB: INSERT message + UPDATE Conversation (SLA timestamps, status)
Prompt To Fix All With AIFix the following 1 code review issue. Work through them one at a time, proposing concise fixes.
---
### Issue 1 of 1
apps/dashboard/src/components/design-components/index.ts:1-14
`DesignDialog` and its siblings are now exported from `packages/dashboard-ui-components/src/index.ts` (added in this PR), so `export * from "@stackframe/dashboard-ui-components"` already surfaces them. The explicit re-export via a 5-level relative path to the package source is redundant: if the package ever resolves to its compiled `dist/` output in a production build, this direct source import would produce a second, distinct module instance — breaking React component identity comparisons (`===`) for anything wrapping or memoising these components.
```suggestion
export * from "@stackframe/dashboard-ui-components";
```
Reviews (2): Last reviewed commit: "Enhance PageClient with customizable dia..." | Re-trigger Greptile |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/create-product-line-dialog.tsx (1)
55-63:⚠️ Potential issue | 🟠 Major | ⚡ Quick winClose/reset should happen only after successful create.
Line 55 starts async creation, but Lines 57-63 immediately clear state and close the dialog. If creation fails, the user loses input and must re-enter everything.
Proposed fix
- runAsynchronouslyWithAlert(onCreate({ id: productLineId.trim(), displayName: displayName.trim() })); - - // Reset form - setDisplayName(""); - setProductLineId(""); - setHasManuallyEditedId(false); - setErrors({}); - onOpenChange(false); + runAsynchronouslyWithAlert( + Promise.resolve() + .then(() => onCreate({ id: productLineId.trim(), displayName: displayName.trim() })) + .then(() => { + setDisplayName(""); + setProductLineId(""); + setHasManuallyEditedId(false); + setErrors({}); + onOpenChange(false); + }), + );As per coding guidelines, “always carefully deal with loading and error states; be very explicit with these; ensure errors are NEVER just silently swallowed.”
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@apps/dashboard/src/app/`(main)/(protected)/projects/[projectId]/payments/products/create-product-line-dialog.tsx around lines 55 - 63, The code currently calls runAsynchronouslyWithAlert(onCreate(...)) and immediately clears the form and closes the dialog (setDisplayName, setProductLineId, setHasManuallyEditedId, setErrors, onOpenChange), which loses user input if creation fails; change the flow so you wait for the async create to succeed before resetting/closing: invoke and await runAsynchronouslyWithAlert(onCreate({ id: productLineId.trim(), displayName: displayName.trim() })) (or use its returned promise .then), and only on successful resolution perform the resets (setDisplayName, setProductLineId, setHasManuallyEditedId, setErrors) and call onOpenChange(false); ensure errors from onCreate are propagated/handled by runAsynchronouslyWithAlert so you do not clear state on failure and consider setting/clearing an explicit loading state around the call.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In
`@apps/dashboard/src/app/`(main)/(protected)/projects/[projectId]/payments/products/create-product-line-dialog.tsx:
- Around line 55-63: The code currently calls
runAsynchronouslyWithAlert(onCreate(...)) and immediately clears the form and
closes the dialog (setDisplayName, setProductLineId, setHasManuallyEditedId,
setErrors, onOpenChange), which loses user input if creation fails; change the
flow so you wait for the async create to succeed before resetting/closing:
invoke and await runAsynchronouslyWithAlert(onCreate({ id: productLineId.trim(),
displayName: displayName.trim() })) (or use its returned promise .then), and
only on successful resolution perform the resets (setDisplayName,
setProductLineId, setHasManuallyEditedId, setErrors) and call
onOpenChange(false); ensure errors from onCreate are propagated/handled by
runAsynchronouslyWithAlert so you do not clear state on failure and consider
setting/clearing an explicit loading state around the call.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 5aa16616-578d-442e-8b3a-379f9dc1c14b
📒 Files selected for processing (7)
apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsxapps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/layout.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/product-lines/page-client.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/create-product-line-dialog.tsxapps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsxdocs/src/components/mdx/app-card.tsx
✅ Files skipped from review due to trivial changes (2)
- docs/src/components/mdx/app-card.tsx
- apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
- apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sign-up-rules/page-client.tsx
- Removed redundant checks for free plans in the payment switch logic to streamline the process. - Added a new function to determine if a price is free based on all supported currencies. - Updated error handling to ensure subscriptions cannot be switched without an existing subscription or valid free plan. - Minor UI adjustments in the dashboard to improve user experience, including a button fix in the RuleTriggerHistoryDialog. This commit improves the clarity and efficiency of the payment switching functionality while ensuring proper validation of subscription states.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
- Introduced `designFieldTriggerClasses` and `designPopoverSurfaceClasses` for consistent styling across payment-related components. - Updated `IncludedItemDialog`, `PriceEditDialog`, `RepeatingInput`, and `ItemDialog` to utilize the new design tokens, enhancing maintainability and visual consistency. - Removed redundant local definitions of options in favor of centralized constants for repeat and free trial units. This commit streamlines the styling process and improves the overall design coherence in the payment dialogs.
nams1570
approved these changes
May 21, 2026
Collaborator
nams1570
left a comment
nams1570
left a comment
There was a problem hiding this comment.
Assuming the diff doesnt end up readding default prod changes, I think the PR is good to merge. The UI/UX changes are correct and non breaking for payments
- Updated the `validateAndCreate` function to be asynchronous, allowing for proper error handling during product line creation. - Ensured the dialog remains open with user input intact if creation fails, improving user experience. - Adjusted the button click handler to correctly await the validation function before proceeding. This commit improves the reliability and usability of the product line creation process in the payments dialog.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR brings the Payments dashboard surfaces in line with the shared design system: product creation, product-line / included-item dialogs, auth-method toggles, payments empty states, and related layout polish. Dialogs migrate from raw shadcn
DialogtoDesignDialogwith consistent headers, footers, inputs, and selector dropdowns.Base:
dev→ Head:Payments-app-design-fixesScope: 31 files, ~+1.4k / −1.3k lines
Captured on: local dev server (
internalproject), signed in as[email protected]Screenshots
Captured from
http://localhost:8101(viewport: 1920×1200 standard, 2560×1440 widescreen). Assets hosted in this gist.Create Product — payments form redesign
Widescreen:
Product Lines onboarding — vertical centering fix
Create Product Line dialog —
DesignDialogmigrationdev— open via Product Line → Create new)Auth Methods — toggle row accessibility
Other migrated surfaces (after only)
Scroll behaviour — Sign-up Rules
What's new
DesignDialogextended withcustomHeader,noBodyPadding, and sectionclassNamehooks; Playground updated to showcase them.CreateProductLineDialog,IncludedItemDialog, price edit, item dialog) migrated to design-system components.DesignButton,DesignInput,DesignSelectorDropdown, and refreshed header actions.<Label htmlFor>instead of click-capture divs.Notes for reviewers
runAsynchronouslyWithAlertwhere applicable).packages/stack/packages/jsare untouched; template + dashboard-ui-components carry SDK-facing dialog changes.Test plan
internalproject ([email protected]) — light/dark, standard + widescreenpnpm typecheck/pnpm lint/ targeted E2E if API surface changed