<!--
ONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR changes the default development ports for several background
services to avoid conflicts. PostgreSQL moves from port `5432` to
`8128`, Inbucket SMTP from `2500` to `8129`, Inbucket POP3 from `1100`
to `8130`, and the OpenTelemetry collector from `4318` to `8131`. All
references across configuration files, Docker Compose setups,
environment files, CI/CD workflows, test files, and documentation have
been updated to reflect these new port assignments. A knowledge base
document has been added to document the new port mappings.
⏱️ Estimated Review Time: 15-30 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
| --- | --- |
| 1 | `claude/CLAUDE-KNOWLEDGE.md` |
| 2 | `apps/dev-launchpad/public/index.html` |
| 3 | `docker/dependencies/docker.compose.yaml` |
| 4 | `docker/emulator/docker.compose.yaml` |
| 5 | `apps/backend/.env` |
| 6 | `apps/backend/.env.development` |
| 7 | `docker/server/.env.example` |
| 8 | `package.json` |
| 9 | `.devcontainer/devcontainer.json` |
| 10 | `apps/e2e/.env.development` |
| 11 | `.github/workflows/check-prisma-migrations.yaml` |
| 12 | `.github/workflows/docker-server-test.yaml` |
| 13 | `.github/workflows/e2e-api-tests.yaml` |
| 14 | `.github/workflows/e2e-source-of-truth-api-tests.yaml` |
| 15 | `.github/workflows/restart-dev-and-test.yaml` |
| 16 |
`apps/e2e/tests/backend/endpoints/api/v1/internal/email-drafts.test.ts`
|
| 17 | `apps/e2e/tests/backend/endpoints/api/v1/internal/email.test.ts`
|
| 18 | `apps/e2e/tests/backend/endpoints/api/v1/send-email.test.ts` |
| 19 |
`apps/e2e/tests/backend/endpoints/api/v1/unsubscribe-link.test.ts` |
| 20 | `apps/e2e/tests/backend/workflows.test.ts` |
| 21 | `docs/templates/others/self-host.mdx` |
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> This PR introduces customizable development ports using
`NEXT_PUBLIC_STACK_PORT_PREFIX`, updating configurations, documentation,
and tests accordingly.
>
> - **Behavior**:
> - Default development ports for services are now customizable via
`NEXT_PUBLIC_STACK_PORT_PREFIX`.
> - PostgreSQL port changed from `5432` to
`${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}28`.
> - Inbucket SMTP port changed from `2500` to
`${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}29`.
> - Inbucket POP3 port changed from `1100` to
`${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}30`.
> - OpenTelemetry collector port changed from `4318` to
`${NEXT_PUBLIC_STACK_PORT_PREFIX:-81}31`.
> - **Configuration**:
> - Updated `docker.compose.yaml` to use new port variables for services
like PostgreSQL, Inbucket, and OpenTelemetry.
> - Environment files in `apps/backend`, `apps/dashboard`, and
`apps/e2e` updated to use `NEXT_PUBLIC_STACK_PORT_PREFIX`.
> - `package.json` scripts updated to reflect new port configurations.
> - **Documentation**:
> - Added `CLAUDE-KNOWLEDGE.md` to document new port mappings.
> - Updated `self-host.mdx` to reflect new port configurations.
> - **Testing**:
> - Updated test files in `apps/e2e/tests` to use new port
configurations.
> - Added `helpers/ports.ts` for port-related utilities in tests.
>
> <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 76ef55f58f. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
----
<!-- ELLIPSIS_HIDDEN -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Enable configurable development ports via a
NEXT_PUBLIC_STACK_PORT_PREFIX, allowing parallel local environments with
custom port prefixes.
- **Bug Fixes**
- Updated local service port mappings and CI/workflow settings so
tooling and tests use the new prefixed ports consistently.
- **Documentation**
- Added docs and contributor guidance for running multiple parallel
workspaces with custom port prefixes.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: N2D4 <N2D4@users.noreply.github.com>
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR adds a warning mechanism for incomplete Stripe payments setup by
checking if `charges_enabled` is true on the connected Stripe account.
The backend now retrieves and passes the `charges_enabled` status
through the purchase flow, and the frontend checkout form displays an
error message when payments are not fully enabled, preventing users from
attempting purchases on misconfigured accounts. Additionally, minor
cleanup was performed including removing unused test mode toggle state
management and fixing a description typo.
⏱️ Estimated Review Time: 15-30 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 |
`apps/backend/src/app/api/latest/payments/purchases/verification-code-handler.tsx`
|
| 2 |
`apps/backend/src/app/api/latest/payments/purchases/create-purchase-url/route.ts`
|
| 3 |
`apps/backend/src/app/api/latest/payments/purchases/validate-code/route.ts`
|
| 4 | `apps/dashboard/src/components/payments/checkout.tsx` |
| 5 | `apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx` |
| 6 |
`apps/e2e/tests/backend/endpoints/api/v1/payments/validate-code.test.ts`
|
| 7 |
`apps/e2e/tests/backend/endpoints/api/v1/payments/before-offer-to-product-rename/outdated--validate-code.test.ts`
|
| 8 |
`apps/backend/src/app/api/latest/payments/purchases/purchase-session/route.tsx`
|
| 9 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx`
|
</details>
<details>
<summary>⚠️ Inconsistent Changes Detected</summary>
| File Path | Warning |
|-----------|---------|
|
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx`
| Removes error handling and loading state management for test mode
toggle, which seems unrelated to the charges_enabled warning feature |
|
`apps/backend/src/app/api/latest/payments/purchases/purchase-session/route.tsx`
| Changes description from 'Stripe price ID' to 'Stack auth price ID'
which is a documentation change unrelated to the charges_enabled warning
|
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Checkout interface now displays a "Payments not enabled" message with
guidance when charges are not enabled on the payment account.
* **Documentation**
* Clarified price ID field description in payment session documentation.
* **Tests**
* Updated payment validation endpoint test expectations to reflect new
response fields.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1920" height="965" alt="Screenshot 2025-10-16 at 7 22 51 PM"
src="https://github.com/user-attachments/assets/d6bed009-9a36-4c46-bf24-3a3dd29ef218"
/>
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR enhances the team invitation management in the dashboard by
replacing a server action with a client-side implementation that
displays pending team invitations in a redesigned dialog. The new dialog
shows current dashboard admin seat usage (active users plus pending
invitations versus the limit), lists all pending invitations with the
ability to revoke them, and provides an upgrade path when the team
reaches capacity. The implementation uses React Suspense for loading
states and moves invitation logic to the client using the admin app API.
⏱️ Estimated Review Time: 15-30 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 |
`packages/template/src/lib/stack-app/apps/implementations/server-app-impl.ts`
|
| 2 |
`apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page.tsx`
|
| 3 |
`apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx`
|
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Team invitation now uses a modal dialog interface
* Added upgrade prompt when team reaches capacity limits
* **Bug Fixes**
* Fixed invitation list not updating after revocation
* **Improvements**
* Enhanced error handling with user-facing notifications for invitation
failures
* Improved form validation feedback during team member invitations
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1453" height="968" alt="Screenshot 2025-10-16 at 2 13 26 PM"
src="https://github.com/user-attachments/assets/bdcda780-ec3f-4595-beaf-fde4ddf8a59c"
/>
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR improves the payment UI by redesigning the incomplete Stripe
setup alert banner with a more visually appealing amber-themed warning,
and refines the product pricing interface by clarifying button labels
and cleaning up unused code. The setup banner now features better visual
hierarchy with icons, bullet points for missing capabilities, and a
prominent continue button, while the product card interface now displays
"Add Alternative Price" instead of just "Add Price" when prices already
exist.
⏱️ Estimated Review Time: 5-15 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/layout.tsx`
|
| 2 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx`
|
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> UI enhancements and logic improvements for payment setup and product
management in `layout.tsx` and `page-client-catalogs-view.tsx`.
>
> - **UI Enhancements**:
> - Updated incomplete Stripe setup alert in `layout.tsx` with improved
styling and clearer user guidance.
> - Enhanced product price management UI in
`page-client-catalogs-view.tsx`, including conditional button labels and
improved price handling logic.
> - **Logic Improvements**:
> - Introduced `hasExistingPrices` in `ProductCard` to simplify price
existence checks.
> - Removed unused `shouldUseDummyData` state in `PageClient`.
> - **Misc**:
> - Minor refactoring and cleanup in `page-client-catalogs-view.tsx` for
better readability and maintainability.
>
> <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 d50c56de7d. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
<!-- ELLIPSIS_HIDDEN -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **UI Improvements**
* Enhanced incomplete payments alert with actionable guidance displayed
more prominently
* Improved price management interface with contextual button labels for
clearer user guidance
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR fixes payment test mode behavior by changing the default test
mode setting to `true` and refactoring the test mode bypass UI. The
bypass functionality is moved from a floating card in the purchase page
into the checkout form itself, providing a cleaner and more integrated
experience. Additionally, the database migration configuration is
updated to increase the `maxWait` timeout to handle concurrent migration
attempts more gracefully in high-contention scenarios like CI
environments.
⏱️ Estimated Review Time: 5-15 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 | `packages/stack-shared/src/config/schema.ts` |
| 2 | `apps/dashboard/src/app/(main)/purchase/[code]/page-client.tsx` |
| 3 | `apps/dashboard/src/components/payments/checkout.tsx` |
| 4 | `apps/backend/src/auto-migrations/index.tsx` |
</details>
<details>
<summary>⚠️ Inconsistent Changes Detected</summary>
| File Path | Warning |
|-----------|---------|
| `apps/backend/src/auto-migrations/index.tsx` | Database migration
timeout configuration changes appear unrelated to payment test mode
fixes, which is the stated purpose of this PR |
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Sets payment test mode to default true, integrates test mode bypass
into checkout form, and updates migration timeout.
>
> - **Behavior**:
> - Default `testMode` set to `true` in `schema.ts`.
> - Integrates test mode bypass into `CheckoutForm` in `checkout.tsx`.
> - Removes separate bypass panel from `page-client.tsx`.
> - **Database**:
> - Increases `maxWait` timeout in `index.tsx` to handle concurrent
migration attempts.
> - **Tests**:
> - Updates tests in `backend-helpers.ts` and `validate-code.test.ts` to
reflect test mode behavior.
>
> <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 6313c0bfed. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
----
<!-- ELLIPSIS_HIDDEN -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a test-mode checkout path with a “Complete test purchase” action
when test mode is active.
* **Refactor**
* Consolidated test-mode bypass into the checkout component and removed
the separate bypass UI.
* **Bug Fixes**
* Improved reliability of database migrations by extending the
transaction wait window, reducing timeout errors under load.
* **Chores**
* Payments now default to test mode enabled.
* **Tests**
* Updated tests and payload expectations to reflect test mode defaults
and behavior.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<img width="1458" height="968" alt="Screenshot 2025-10-10 at 2 27 00 PM"
src="https://github.com/user-attachments/assets/ad2a4ecb-35b8-4b8b-a553-899ce0096d7a"
/>
(PAST)
<img width="1483" height="608" alt="Screenshot 2025-10-07 at 1 54 00 PM"
src="https://github.com/user-attachments/assets/abb854ba-fd9b-41de-a755-432262c8e1b2"
/>
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR improves the visibility and usability of the team member
invitation feature by replacing a small icon button with a more
prominent button labeled "Invite Teammate", reorganizing the team header
layout to better position the invite button, and making the invite
functionality more robust by fetching user and admin data asynchronously
instead of using hooks.
⏱️ Estimated Review Time: 5-15 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 |
`apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/projects/page-client.tsx`
|
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Enhances team member invitation UI and refactors data fetching in
`page-client.tsx` for better usability and robustness.
>
> - **UI Enhancements**:
> - Replaced icon-only invite button with a ghost button labeled "Invite
Teammate" in `page-client.tsx`.
> - Reorganized team header layout to better position the invite button.
> - **Data Fetching**:
> - Updated `TeamAddUserDialog` to fetch user and admin data
asynchronously instead of using hooks.
> - Validates admin limits at submission time in `TeamAddUserDialog`.
> - **Misc**:
> - Dialog title now reflects the team's display name in
`TeamAddUserDialog`.
>
> <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 3e16f0c9cd. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
----
<!-- ELLIPSIS_HIDDEN -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **Refactor**
* Projects are now grouped by team with readable team labels and a “No
Team” fallback; each team shows its own project grid.
* The “Add User” dialog is available next to each team and shows the
team’s display name in the title.
* **Style**
* Replaced icon-only trigger with a ghost button using a settings icon
and improved accessibility.
* **Chores**
* Invite submission now validates current admin limits at submit time.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
https://www.loom.com/share/2767f799df9d48519c737a1d082fc3f4?sid=967802e9-5bfb-438d-96cd-2f6fcbd2f69b
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR adds a "Grant Product" feature to the dashboard's customer page,
allowing administrators to manually grant products to users, teams, or
custom customers. The UI has been updated to rename "Items" to
"Customers" in the navigation, and the page now includes a dialog for
selecting a product and quantity (for stackable products) to grant.
Additionally, the backend payment logic has been enhanced to properly
set `currentPeriodEnd` and `cancelAtPeriodEnd` when canceling
conflicting subscriptions during product grants.
⏱️ Estimated Review Time: 15-30 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/sidebar-layout.tsx`
|
| 2 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/customers/page.tsx`
|
| 3 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/customers/page-client.tsx`
|
| 4 | `apps/backend/src/lib/payments.tsx` |
| 5 |
`packages/template/src/lib/stack-app/apps/implementations/server-app-impl.ts`
|
</details>
<details>
<summary>⚠️ Inconsistent Changes Detected</summary>
| File Path | Warning |
|-----------|---------|
|
`packages/template/src/lib/stack-app/apps/implementations/server-app-impl.ts`
| This appears to be a simple variable rename (cache to itemsCache) that
seems unrelated to adding grant product functionality to the dashboard |
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Adds "Grant Product" feature to dashboard, enabling admins to grant
products to customers, with new API endpoints, UI updates, and backend
logic enhancements.
>
> - **Behavior**:
> - Adds "Grant Product" feature to dashboard's customer page, allowing
admins to grant products to users, teams, or custom customers.
> - Updates UI to rename "Items" to "Customers" in navigation and adds
dialogs for product selection and quantity.
> - Enhances backend payment logic to set `currentPeriodEnd` and
`cancelAtPeriodEnd` when canceling conflicting subscriptions.
> - **API**:
> - New endpoints in `route.ts` for listing customer products and
granting products.
> - Implements `grantProductToCustomer()` in `payments.tsx` to handle
product grants.
> - **SDK**:
> - Adds `grantProduct` (server) and `listProducts` (client/server)
methods.
> - Updates `client-app-impl.ts` and `server-app-impl.ts` to support new
product functionalities.
> - **Models**:
> - Adds `CustomerProduct` and `CustomerProductsList` types in
`customers/index.ts`.
> - **Misc**:
> - Introduces `PRODUCT_ALREADY_GRANTED` error in `known-errors.tsx`.
> - Updates tests in `products.test.ts` and other test files to cover
new product grant scenarios.
>
> <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 f0d112f578. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
----
<!-- ELLIPSIS_HIDDEN -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **New Features**
- Dashboard: New "Customers" page to view customers, grant products, and
manage items with dialogs and selectors for users, teams, or custom IDs.
- API/SDK: Endpoints and client/server SDK methods to list a customer’s
products (paginated) and to grant products.
- **Improvements**
- Error responses for already-owned non-stackable products are now
structured with clear codes and headers.
- Product payloads include server_only, included_items, and new
stackable support.
- **UI**
- Team search table and clickable team rows for faster navigation.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
<img width="549" height="576" alt="Screenshot 2025-10-07 at 4 15 53 PM"
src="https://github.com/user-attachments/assets/7dd63333-691d-42f2-996f-80a22e9effca"
/>
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR adds an optional tooltip feature to code blocks and improves the
UI layout and spacing in the product catalog view. The `CodeBlock`
component now accepts a `tooltip` prop that displays an info tooltip
next to the copy button. The product catalog view receives several
layout improvements including better spacing, reorganized form controls,
and the addition of tooltips to code blocks that explain their purpose.
The changes also swap item ID display for item display names in some
places for better readability.
⏱️ Estimated Review Time: 15-30 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 | `apps/dashboard/src/components/code-block.tsx` |
| 2 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx`
|
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Add tooltips to code blocks and adjust spacing in `ProductItemRow` for
improved UI and readability.
>
> - **Code Block Enhancements**:
> - Add `tooltip` prop to `CodeBlock` in `code-block.tsx` for displaying
tooltips with additional information.
> - Use `SimpleTooltip` to show tooltips next to the copy button.
> - **UI Adjustments**:
> - Adjust spacing in `ProductItemRow` in
`page-client-catalogs-view.tsx` for better layout.
> - Replace `itemId` with `itemDisplayName` for better readability.
> - Add tooltips to buttons in `ProductCard` for checkout and item
retrieval.
>
> <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 5547ddb9c3. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
<!-- ELLIPSIS_HIDDEN -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- New Features
- Inline tooltips on code blocks and checkout actions.
- Per-item expiration editing via a dropdown, including a “Never
expires” option.
- Remove item action integrated directly into the editing row.
- UI Improvements
- Redesigned product item editing layout with clearer headers, spacing,
and grouped controls.
- Consistent use of item display names across views and cards.
- Enhanced checkout code block in product cards with explanatory
tooltip.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Co-authored-by: Konsti Wohlwend <n2d4xc@gmail.com>
https://www.loom.com/share/59ff826f88324a61bb2fefc51769f840?sid=3fe23444-c56e-46c8-a402-8df38a69403c
<!--
Make sure you've read the CONTRIBUTING.md guidelines:
https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md
-->
<!-- RECURSEML_SUMMARY:START -->
## High-level PR Summary
This PR improves the payment products UI by relocating the save/cancel
buttons from the top to the bottom of the product card and replacing the
generic `EditableInput` component with a custom `ProductEditableInput`
component that better handles the specific styling and interaction
patterns needed for product fields. The changes include better visual
feedback during editing and improved layout alignment for the price
input field.
⏱️ Estimated Review Time: 15-30 minutes
<details>
<summary>💡 Review Order Suggestion</summary>
| Order | File Path |
|-------|-----------|
| 1 |
`apps/dashboard/src/app/(main)/(protected)/projects/[projectId]/payments/products/page-client-catalogs-view.tsx`
|
</details>
[](https://discord.gg/n3SsVDAW6U)
[
<!-- RECURSEML_SUMMARY:END -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* New Features
- Unified editable product input with read-only and inline editing
modes, placeholder support, and explicit Cancel/Save actions.
* Style
- Improved price-editing layout: aligned currency symbol, spacing, and
input visuals for clearer monetary entry.
- Polished input appearance for consistent look and feel across product
views.
* Refactor
- Replaced scattered editable fields with a single reusable input
component across product editing screens for consistency.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!-- ELLIPSIS_HIDDEN -->
----
> [!IMPORTANT]
> Move save/cancel buttons to bottom and replace `EditableInput` with
`ProductEditableInput` for improved UI in
`page-client-catalogs-view.tsx`.
>
> - **UI Changes**:
> - Move save/cancel buttons to the bottom of the product card in
`ProductCard`.
> - Replace `EditableInput` with `ProductEditableInput` for better
styling and interaction in `ProductCard`.
> - **Component Changes**:
> - Add `ProductEditableInput` component to handle product-specific
input styling and behavior.
> - Update `ProductPriceRow` to improve price input layout and visuals.
> - **Misc**:
> - Remove unused import of `EditableInput`.
>
> <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 c09cb54306. You can
[customize](https://app.ellipsis.dev/stack-auth/settings/summaries) this
summary. It will automatically update as commits are pushed.</sup>
<!-- ELLIPSIS_HIDDEN -->
