BilalG1 5ac2b0d74a product card fixes, payments test mode (#928) ... 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 -->		2025-10-07 18:07:13 +00:00
..
backend	product card fixes, payments test mode (#928)	2025-10-07 18:07:13 +00:00
dashboard	product card fixes, payments test mode (#928)	2025-10-07 18:07:13 +00:00
dev-launchpad	chore: update package versions	2025-09-26 23:16:39 -05:00
e2e	product card fixes, payments test mode (#928)	2025-10-07 18:07:13 +00:00
mock-oauth-server	chore: update package versions	2025-09-26 23:16:39 -05:00
oauth-mock-server	In-source unit tests (#429)	2025-02-14 11:47:52 -08:00