offer and item pages, edits, deletes by BilalG1 · Pull Request #856 · stack-auth/stack-auth

BilalG1 · 2025-08-20T23:51:33Z

(https://www.loom.com/share/ab23e3ed0dde44bcb791d30b3b012777?sid=2ee6dcb4-feca-4d0f-9c8d-1ae9d71ba8f7)

Important

Adds management pages for payment offers and items with create, edit, and delete functionalities, and updates schemas for default values and validation.

Behavior:
- Adds page-client.tsx and page.tsx for both items and offers under payments to manage payment items and offers.
- Implements DialogOpener in page-client.tsx for creating new items and offers.
- Adds edit and delete functionality for items and offers in payment-item-table.tsx and payment-offer-table.tsx.
- Updates ensureOfferIdOrInlineOffer in payments.tsx to default quantity to 0 if undefined.
Schema:
- Updates branchPaymentsSchema in schema.ts to set default quantity to 0 for items.
- Modifies offerSchema and inlineOfferSchema in schema-fields.ts to define quantity as required.
UI Components:
- Introduces ItemDialog and OfferDialog for item and offer creation/editing.
- Adds DialogOpener component for handling dialog state.
- Updates DayIntervalSelectorField to include an unset label option.
Navigation:
- Adds "Offers" and "Items" to the sidebar in sidebar-layout.tsx with feature flag checks.

^{This description was created by}^{for c22bf3c. You can customize this summary. It will automatically update as commits are pushed.}

vercel · 2025-08-20T23:51:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
stack-backend	Ready	Preview	Comment	Aug 25, 2025 5:58pm
stack-dashboard	Ready	Preview	Comment	Aug 25, 2025 5:58pm
stack-demo	Ready	Preview	Comment	Aug 25, 2025 5:58pm
stack-docs	Ready	Preview	Comment	Aug 25, 2025 5:58pm

coderabbitai · 2025-08-20T23:51:39Z

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing Touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch payments-ui-fixes

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

Visit our Status Page to check the current availability of CodeRabbit.
Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

greptile-apps

Greptile Summary

This PR implements a comprehensive payments UI system for managing payment offers and items in the Stack Auth dashboard. The changes introduce dedicated pages for offers and items management, complete CRUD operations, and several UI enhancements.

Core functionality added:

New payment management pages: Created separate pages for managing payment items (/payments/items) and offers (/payments/offers), both gated behind dev feature flags
CRUD operations: Added full create, read, update, and delete functionality for both items and offers through modal dialogs with form validation
Navigation integration: Added "Offers" and "Items" navigation links to the sidebar with appropriate icons (SquarePen and Box)

Key components introduced:

DialogOpener: A reusable component using render props to manage dialog state across the payments UI
ItemDialog: Form dialog for creating/editing payment items with validation and duplicate ID prevention
OfferDialog: Comprehensive form dialog for managing payment offers with pricing, included items, and advanced options
Enhanced data tables with inline edit/delete actions and dependency validation (prevents deleting items used in offers)

Schema and validation improvements:

Made quantity field required for included items in offers (changed from optional to .defined())
Updated default quantity value from undefined to 0 to prevent calculation errors
Added support for "unset" options in DayIntervalSelectorField with customizable labels

Architectural changes:

Refactored the main payments page to use Stripe Connect integration via ConnectPayments component
Moved custom payment management UI to dedicated item/offer pages
Improved form UX with better placeholders ("standard" for price IDs, "One time" for interval unset)

The implementation follows established patterns in the codebase for form dialogs, data tables, and page structure, maintaining consistency with existing user management interfaces while extending functionality specifically for payment management scenarios.

Confidence score: 4/5

This PR is generally safe to merge with some minor concerns around code organization and potential edge cases
Score reflects solid architectural patterns and thorough validation logic, but some areas need attention for maintainability
Pay close attention to offer-dialog.tsx for schema definition conflicts and included-item-editor.tsx for import organization

_{16 files reviewed, 7 comments}

_{Edit Code Review Bot Settings | Greptile}

apps/dashboard/src/components/form-fields/day-interval-selector-field.tsx

apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx

apps/dashboard/src/components/payments/item-dialog.tsx

apps/dashboard/src/components/payments/offer-dialog.tsx

recurseml · 2025-08-20T23:54:47Z

Review by RecurseML

🔍 Review performed on da6f000..4b79dd1

✨ No bugs found, your code is sparkling clean

✅ Files analyzed, no issues (5)

• apps/dashboard/src/components/payments/offer-dialog.tsx
• apps/dashboard/src/components/payments/item-dialog.tsx
• apps/dashboard/src/components/data-table/payment-offer-table.tsx
• apps/dashboard/src/components/data-table/payment-item-table.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/items/page-client.tsx

⏭️ Files skipped (low suspicion) (11)

• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/items/page.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/offers/page-client.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/offers/page.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/page-client.tsx
• apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx
• apps/dashboard/src/components/dialog-opener.tsx
• apps/dashboard/src/components/form-fields/day-interval-selector-field.tsx
• apps/dashboard/src/components/payments/included-item-editor.tsx
• apps/dashboard/src/components/payments/price-editor.tsx
• packages/stack-shared/src/config/schema.ts
• packages/stack-shared/src/schema-fields.ts

https://www.loom.com/share/7f61024ffa354850a70779ac7a20c138?sid=b523394b-b243-4bd2-819c-e36ebab1ab92   ---- > [!IMPORTANT] > Introduce test mode for payment subscriptions, including database schema updates, new API routes, client-side handling, and comprehensive test coverage. > > - **Database**: > - Add `creationSource` column to `Subscription` model in `schema.prisma` and `migration.sql`. > - Enum `SubscriptionCreationSource` added with values `PURCHASE_PAGE` and `TEST_MODE`. > - **API**: > - New route `test-mode-purchase-session` in `route.tsx` for handling test mode purchases. > - Modify `purchase-session` and `validate-code` routes to support test mode. > - **Client**: > - Update `page-client.tsx` to handle test mode bypass and display relevant UI elements. > - Add `handleBypass` function to simulate test mode purchases. > - **Testing**: > - Add tests in `purchase-session.test.ts` and `validate-code.test.ts` for test mode scenarios. > - **Misc**: > - Update `admin-interface.ts` and `admin-app.ts` to include `testModePurchase` function. > - Minor updates to `tailwind.config.ts` for animations. > > <sup>This description was created by </sup>[<img alt="Ellipsis" src="https://img.shields.io/badge/Ellipsis-blue?color=175173">](https://www.ellipsis.dev?ref=stack-auth%2Fstack-auth&utm_source=github&utm_medium=referral)<sup> for fd52134. You can [customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this summary. It will automatically update as commits are pushed.</sup>

offer and item pages, edits, deletes

4b79dd1

github-actions bot assigned BilalG1 Aug 20, 2025

greptile-apps bot reviewed Aug 20, 2025

View reviewed changes

BilalG1 added 2 commits August 20, 2025 16:57

fix lint

4c546b8

small fixes

c22bf3c

BilalG1 assigned N2D4 and unassigned BilalG1 Aug 21, 2025

N2D4 approved these changes Aug 22, 2025

View reviewed changes

N2D4 assigned BilalG1 and unassigned N2D4 Aug 22, 2025

BilalG1 merged commit 13ef13f into custom-item-customers Aug 25, 2025
12 of 17 checks passed

BilalG1 deleted the payments-ui-fixes branch August 25, 2025 17:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

offer and item pages, edits, deletes#856

offer and item pages, edits, deletes#856
BilalG1 merged 4 commits intocustom-item-customersfrom
payments-ui-fixes

BilalG1 commented Aug 20, 2025 •

edited by ellipsis-dev bot

Loading

Uh oh!

vercel bot commented Aug 20, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Aug 20, 2025 •

edited

Loading

Other AI code review bot(s) detected

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Status, Documentation and Community

Uh oh!

greptile-apps bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

recurseml bot commented Aug 20, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

BilalG1 commented Aug 20, 2025 • edited by ellipsis-dev bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Other AI code review bot(s) detected

Review skipped

Chat

Support

CodeRabbit Commands (Invoked using PR/Issue comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Status, Documentation and Community

Uh oh!

greptile-apps bot left a comment

Choose a reason for hiding this comment

Greptile Summary

Confidence score: 4/5

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

recurseml bot commented Aug 20, 2025

Review by RecurseML

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

BilalG1 commented Aug 20, 2025 •

edited by ellipsis-dev bot

Loading

vercel bot commented Aug 20, 2025 •

edited

Loading

coderabbitai bot commented Aug 20, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)