---
id: US-MKT-001
title: Explorar Catalogo de Productos
type: user-story
status: Draft
priority: High
epic: OQI-009
project: trading-platform
version: 1.0.0
dates:
  created: 2026-01-04
  updated: 2026-01-04
tags:
  - marketplace
  - catalog
  - exploration
  - user-story
story_points: 8
sprint: TBD
assignee: TBD
---

# US-MKT-001: Explorar Catalogo de Productos

## Historia de Usuario

**Como** usuario de Trading Platform
**Quiero** explorar el catalogo de productos del marketplace
**Para** descubrir y evaluar productos premium que mejoren mi experiencia de trading

## Descripcion

El usuario necesita una interfaz intuitiva para navegar por todos los productos disponibles en el marketplace. Debe poder filtrar, buscar y ver detalles de cada producto antes de decidir una compra.

## Criterios de Aceptacion

### AC-001: Ver Catalogo Completo
```gherkin
Given soy usuario autenticado
When accedo al Marketplace desde el menu principal
Then veo una pagina con todos los productos activos
And cada producto muestra:
  | campo           | visible |
  | nombre          | si      |
  | precio          | si      |
  | tipo            | si      |
  | descripcion     | si      |
  | imagen/icono    | si      |
  | badge featured  | si/no   |
```

### AC-002: Filtrar por Categoria
```gherkin
Given estoy en la pagina del marketplace
When selecciono la categoria "Senales"
Then solo veo productos de tipo signal_pack
And el contador muestra el numero de productos filtrados
And puedo limpiar el filtro facilmente
```

### AC-003: Buscar Producto
```gherkin
Given estoy en la pagina del marketplace
When escribo "premium" en el buscador
Then veo productos que contienen "premium" en nombre o descripcion
And los resultados se actualizan en tiempo real
And se resalta el termino de busqueda
```

### AC-004: Ordenar Productos
```gherkin
Given estoy viendo el catalogo
When selecciono ordenar por "Precio: menor a mayor"
Then los productos se reordenan por precio ascendente
And puedo cambiar a otros criterios:
  | criterio              |
  | Precio: mayor a menor |
  | Mas populares         |
  | Mas recientes         |
  | Mejor valorados       |
```

### AC-005: Ver Detalle de Producto
```gherkin
Given veo un producto en el catalogo
When hago click en el producto
Then veo la pagina de detalle con:
  | seccion              | contenido                    |
  | Titulo               | Nombre completo              |
  | Precio               | Con formato y moneda         |
  | Descripcion          | Texto completo               |
  | Caracteristicas      | Lista de features            |
  | Reviews              | Valoraciones de usuarios     |
  | Productos relacionados| Sugerencias                 |
And veo boton prominente "Comprar" o "Suscribirse"
```

### AC-006: Ver Productos Destacados
```gherkin
Given accedo al marketplace
Then la seccion "Destacados" aparece primero
And muestra productos marcados como featured
And tiene un diseno diferenciado (carousel o grid destacado)
```

### AC-007: Paginacion
```gherkin
Given hay mas de 12 productos en el catalogo
When llego al final de la pagina
Then puedo cargar mas productos (scroll infinito)
Or veo paginacion tradicional
And el estado de filtros se mantiene
```

## Mockups

### Vista de Catalogo
```
+----------------------------------------------------------+
|  MARKETPLACE                              [Buscar...]     |
+----------------------------------------------------------+
|  Categorias: [Todos] [Senales] [Asesoria] [Visual] [Edu] |
|  Ordenar: [Mas populares v]                               |
+----------------------------------------------------------+
|                                                           |
|  === DESTACADOS ===                                       |
|  +--------+  +--------+  +--------+                       |
|  | UNLIM  |  | VISUAL |  | ASESOR |                       |
|  | $49/m  |  | $19/m  |  | $49    |                       |
|  +--------+  +--------+  +--------+                       |
|                                                           |
|  === TODOS LOS PRODUCTOS ===                              |
|  +--------+  +--------+  +--------+  +--------+           |
|  | Basic  |  | Pro    |  | 30min  |  | 60min  |           |
|  | $9     |  | $29    |  | $49    |  | $89    |           |
|  +--------+  +--------+  +--------+  +--------+           |
|                                                           |
+----------------------------------------------------------+
```

### Vista de Detalle
```
+----------------------------------------------------------+
|  < Volver al catalogo                                     |
+----------------------------------------------------------+
|  +----------+                                             |
|  |  IMAGEN  |   PRO SIGNAL PACK                          |
|  |          |   ****_ (4.5) 120 reviews                  |
|  +----------+                                             |
|                 $29.00 USD                                |
|                 [  COMPRAR AHORA  ]                       |
|                                                           |
|  DESCRIPCION                                              |
|  200 senales ML de alta confianza para...                |
|                                                           |
|  CARACTERISTICAS                                          |
|  * 200 creditos de senales                               |
|  * Confidence minimo 80%                                 |
|  * Validez 60 dias                                       |
|  * Alertas push y email                                  |
|                                                           |
|  REVIEWS                                                  |
|  ***** "Excelente calidad de senales" - Juan             |
|  **** "Muy util para mi estrategia" - Maria              |
|                                                           |
+----------------------------------------------------------+
```

## Flujo de Usuario

```mermaid
flowchart TD
    A[Usuario en Dashboard] --> B[Click Marketplace]
    B --> C[Ver Catalogo]
    C --> D{Accion?}
    D --> E[Filtrar por categoria]
    D --> F[Buscar producto]
    D --> G[Ver producto]
    E --> C
    F --> C
    G --> H[Pagina de detalle]
    H --> I{Comprar?}
    I -->|Si| J[Flujo de compra]
    I -->|No| C
```

## Notas Tecnicas

### API Endpoints Utilizados
- `GET /api/marketplace/products` - Listar productos
- `GET /api/marketplace/products/:id` - Detalle de producto
- `GET /api/marketplace/categories` - Listar categorias
- `GET /api/marketplace/products/featured` - Productos destacados

### Componentes Frontend
- `<ProductCatalog />` - Contenedor principal
- `<ProductCard />` - Tarjeta de producto
- `<ProductDetail />` - Pagina de detalle
- `<CategoryFilter />` - Filtro por categoria
- `<SearchBar />` - Buscador
- `<SortDropdown />` - Selector de ordenamiento

### Estado (Zustand/Context)
```typescript
interface MarketplaceState {
  products: Product[];
  categories: Category[];
  filters: {
    category: string | null;
    search: string;
    sortBy: SortOption;
  };
  pagination: {
    page: number;
    limit: number;
    total: number;
  };
  isLoading: boolean;
}
```

## Definicion de Done

- [ ] Catalogo muestra todos los productos activos
- [ ] Filtros por categoria funcionan correctamente
- [ ] Busqueda en tiempo real implementada
- [ ] Ordenamiento por multiples criterios
- [ ] Vista de detalle completa
- [ ] Productos destacados visibles
- [ ] Paginacion/scroll infinito funcional
- [ ] Responsive design (mobile/tablet/desktop)
- [ ] Tests unitarios para componentes
- [ ] Tests E2E para flujo completo
- [ ] Performance: LCP < 2.5s

## Dependencias

- **RF-MKT-001**: Requerimiento de catalogo
- **ET-MKT-002**: API de productos
- **OQI-001-auth**: Autenticacion de usuario

## Referencias

- [RF-MKT-001: Catalogo](../requerimientos/RF-MKT-001-catalogo.md)
- [ET-MKT-002: API](../especificaciones/ET-MKT-002-api.md)
