Feat/improvements ux#146
Conversation
|
Warning Review limit reached
Next review available in: 17 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughLa página principal incorpora filtros por categoría. Las páginas de producto añaden enlaces de categoría y productos similares cargados mediante API. El formulario de vendedor integra la categoría y reorganiza la galería dentro del dropzone. También se actualiza la validación de personalizaciones. ChangesDescubrimiento de productos
Edición de productos del vendedor
Validación de personalizaciones
Estimated code review effort: 4 (Complex) | ~60 minutes Sequence Diagram(s)sequenceDiagram
participant ProductPage
participant SimilarProducts
participant SimilarAPI
participant SimilarUseCase
participant ProductRepository
ProductPage->>SimilarProducts: Renderiza productId, locale y labels
SimilarProducts->>SimilarAPI: Solicita /api/products/{id}/similar
SimilarAPI->>SimilarUseCase: Ejecuta la búsqueda
SimilarUseCase->>ProductRepository: Busca por etiquetas compartidas
ProductRepository-->>SimilarUseCase: Devuelve productos activos
SimilarUseCase-->>SimilarAPI: Devuelve traducciones y cover
SimilarAPI-->>SimilarProducts: Responde con items
SimilarProducts-->>ProductPage: Renderiza tarjetas enlazadas
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (2)
modules/products/application/get-similar-products-use-case.ts (1)
31-52: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueEliminar
imagesdel retorno deGetSimilarProductsUseCase
imagesno forma parte deSimilarProductItemy no se usa en el consumidor de la ruta. Si hace falta exponerla, añádela explícitamente a la interfaz; si no, quítala del mapeo para mantener el DTO alineado con su tipo.🤖 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 `@modules/products/application/get-similar-products-use-case.ts` around lines 31 - 52, Remove the images property from the object returned by the products map in GetSimilarProductsUseCase so the DTO remains aligned with SimilarProductItem; do not add it to the interface unless the route consumer explicitly requires images.tests/unit/modules/products/application/get-similar-products-use-case.test.ts (1)
22-561: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winFixtures de producto muy repetidos entre los 8 tests.
Cada test reconstruye manualmente el mismo objeto
ProductEntity(25-30 líneas) cambiando solo 2-3 campos. Extraer un factory comomakeProduct(overrides: Partial<ProductEntity>)reduciría el ruido y evitaría que un cambio futuro enProductEntityobligue a tocar los 8 fixtures.♻️ Ejemplo de factory sugerida
function makeProduct(overrides: Partial<ProductEntity> = {}): ProductEntity { return { id: 'p', basePrice: ProductPrice.create(10, Currency.EUR), sellerId: 'seller-1', sellerName: 'Shop', status: ProductStatus.ACTIVE, categoryId: null, category: null, createdAt: new Date(), updatedAt: new Date(), translations: [], images: [], tags: [], ...overrides, }; }🤖 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 `@tests/unit/modules/products/application/get-similar-products-use-case.test.ts` around lines 22 - 561, Extract the repeated ProductEntity setup in the test file into a shared makeProduct factory near the test definitions, using the existing default values and accepting Partial<ProductEntity> overrides. Replace each manually constructed product fixture in the eight tests with makeProduct calls that override only test-specific fields, preserving all current test behavior and assertions.
🤖 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.
Inline comments:
In `@app/`[locale]/page.module.css:
- Line 167: Insert the required empty line immediately before the padding
declaration in the relevant CSS rule to satisfy Stylelint’s
declaration-empty-line-before rule, without changing the padding value or
surrounding styles.
In `@app/`[locale]/page.tsx:
- Line 100: Actualiza la prop key de InfiniteProductList para construir una
clave sin ambigüedades entre q y category, usando una serialización estructurada
o separadores/escape que no permitan colisiones. Conserva la distinción entre
filtros ausentes y presentes para que React remonte el componente cuando cambie
cualquier combinación de búsqueda o categoría.
In `@app/`[locale]/products/[id]/customization-experience.tsx:
- Around line 411-415: Añade key={productId} al componente SimilarProducts para
forzar su remonte al navegar entre productos y restablecer el estado hasLoaded.
Mantén sin cambios las props existentes y el resto del flujo de renderizado.
In `@app/`[locale]/products/[id]/similar-products.tsx:
- Around line 53-55: Valida res.ok en la petición realizada desde el efecto de
carga de productos similares antes de procesar la respuesta; ante cualquier
respuesta no exitosa, conserva el estado vacío y termina el flujo. Además,
protege el acceso a data.items para que solo se pase un arreglo válido a
setItems, evitando que items.length reciba undefined.
In `@app/`[locale]/seller/products/product-form.module.css:
- Around line 101-107: Rename the CSS selector `.tabsSticky` to `.tabs-sticky`
in the `.tabsSticky` style definition, and update its usage in
`product-form.tsx` from `styles.tabsSticky` to `styles['tabs-sticky']`.
In `@tests/unit/app/`[locale]/products/[id]/customization-experience.test.tsx:
- Around line 36-38: Remove the duplicate vi.mock('next/navigation') declaration
near the later test setup, keeping the identical existing mock declaration
earlier in the file and leaving the useRouter behavior unchanged.
---
Nitpick comments:
In `@modules/products/application/get-similar-products-use-case.ts`:
- Around line 31-52: Remove the images property from the object returned by the
products map in GetSimilarProductsUseCase so the DTO remains aligned with
SimilarProductItem; do not add it to the interface unless the route consumer
explicitly requires images.
In
`@tests/unit/modules/products/application/get-similar-products-use-case.test.ts`:
- Around line 22-561: Extract the repeated ProductEntity setup in the test file
into a shared makeProduct factory near the test definitions, using the existing
default values and accepting Partial<ProductEntity> overrides. Replace each
manually constructed product fixture in the eight tests with makeProduct calls
that override only test-specific fields, preserving all current test behavior
and assertions.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 47630ccc-d9df-4804-8eb9-4c9a891cda9b
📒 Files selected for processing (32)
app/[locale]/layout.module.cssapp/[locale]/page.module.cssapp/[locale]/page.tsxapp/[locale]/products/[id]/customization-experience.module.cssapp/[locale]/products/[id]/customization-experience.tsxapp/[locale]/products/[id]/customization-form.module.cssapp/[locale]/products/[id]/customization-form.tsxapp/[locale]/products/[id]/mockup-canvas-control.tsxapp/[locale]/products/[id]/page.module.cssapp/[locale]/products/[id]/page.tsxapp/[locale]/products/[id]/product-showcase-gallery.tsxapp/[locale]/products/[id]/similar-products.module.cssapp/[locale]/products/[id]/similar-products.tsxapp/[locale]/seller/products/product-form.module.cssapp/[locale]/seller/products/product-form.tsxapp/[locale]/seller/products/product-photo-gallery.tsxapp/api/products/[id]/similar/route.tscomponents/products/infinite-product-list.tsxmodules/products/application/get-similar-products-use-case.tsmodules/products/domain/product-repository.tsmodules/products/infrastructure/prisma-product-repository.tsmodules/products/presentation/components/product-customization-config-editor.module.cssmodules/products/presentation/components/product-customization-config-editor.tsxmodules/products/presentation/product-form-labels.tsshared/i18n/locales/cat.jsonshared/i18n/locales/es.jsonshared/ui/file-upload-dropzone.tsxtests/doubles/memory-product-repository.tstests/unit/app/[locale]/products/[id]/customization-experience.test.tsxtests/unit/app/[locale]/seller/products/product-form-locale-tabs.test.tsxtests/unit/app/[locale]/seller/products/product-form.test.tsxtests/unit/modules/products/application/get-similar-products-use-case.test.ts
💤 Files with no reviewable changes (4)
- tests/unit/app/[locale]/seller/products/product-form-locale-tabs.test.tsx
- modules/products/presentation/components/product-customization-config-editor.module.css
- modules/products/presentation/components/product-customization-config-editor.tsx
- modules/products/presentation/product-form-labels.ts
| --search-width: 20rem; | ||
| padding: 0 0 var(--spacing-md) 60px; | ||
| position: relative; | ||
| padding: 0.5rem 0 var(--spacing-md) 60px; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Stylelint: falta línea vacía antes de la declaración padding.
Stylelint reportó un error en la línea 167: se espera una línea vacía antes de la declaración padding (regla declaration-empty-line-before). Esto podría fallar el paso de lint en CI.
🔧 Corrección propuesta
.searchWrap {
--search-offset-left: 60px;
--search-width: 20rem;
+
padding: 0.5rem 0 var(--spacing-md) 60px;
position: sticky;
top: 0;
z-index: calc(var(--z-content) + 1);
background: var(--color-cream);
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| padding: 0.5rem 0 var(--spacing-md) 60px; | |
| .searchWrap { | |
| --search-offset-left: 60px; | |
| --search-width: 20rem; | |
| padding: 0.5rem 0 var(--spacing-md) 60px; | |
| position: sticky; | |
| top: 0; | |
| z-index: calc(var(--z-content) + 1); | |
| background: var(--color-cream); | |
| } |
🧰 Tools
🪛 Stylelint (17.14.0)
[error] 167-167: Expected empty line before declaration (declaration-empty-line-before)
(declaration-empty-line-before)
🤖 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 `@app/`[locale]/page.module.css at line 167, Insert the required empty line
immediately before the padding declaration in the relevant CSS rule to satisfy
Stylelint’s declaration-empty-line-before rule, without changing the padding
value or surrounding styles.
Source: Linters/SAST tools
| .tabsSticky { | ||
| position: sticky; | ||
| top: 0; | ||
| z-index: 10; | ||
| background: var(--color-cream); | ||
| padding: 0.5rem 0; | ||
| } |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
El selector .tabsSticky incumple la convención kebab-case del proyecto.
Stylelint marca este selector como error (selector-class-pattern), lo que hará fallar el lint. Renómbralo a .tabs-sticky y actualiza la referencia en product-form.tsx (que hoy lo usa como styles.tabsSticky → styles['tabs-sticky']).
♻️ Renombrado propuesto
-.tabsSticky {
+.tabs-sticky {
position: sticky;
top: 0;
z-index: 10;
background: var(--color-cream);
padding: 0.5rem 0;
}En app/[locale]/seller/products/product-form.tsx (Línea 956):
- <div className={styles.tabsSticky}>
+ <div className={styles['tabs-sticky']}>🧰 Tools
🪛 Stylelint (17.14.0)
[error] 101-101: Expected class selector ".tabsSticky" to be kebab-case (selector-class-pattern)
(selector-class-pattern)
🤖 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 `@app/`[locale]/seller/products/product-form.module.css around lines 101 - 107,
Rename the CSS selector `.tabsSticky` to `.tabs-sticky` in the `.tabsSticky`
style definition, and update its usage in `product-form.tsx` from
`styles.tabsSticky` to `styles['tabs-sticky']`.
Source: Linters/SAST tools
1 participant
Summary by CodeRabbit
Nuevas funcionalidades
Mejoras visuales
Cambios en formularios y UI
Traducciones y pruebas