---
id: "US-EDU-002"
title: "Ver Detalle de Curso"
type: "User Story"
status: "Done"
priority: "Alta"
epic: "OQI-002"
story_points: 3
created_date: "2025-12-05"
updated_date: "2026-01-04"
---

# US-EDU-002: Ver Detalle de Curso

## Metadata

| Campo | Valor |
|-------|-------|
| **ID** | US-EDU-002 |
| **Épica** | OQI-002 - Módulo Educativo |
| **Módulo** | education |
| **Prioridad** | P0 |
| **Story Points** | 3 |
| **Sprint** | Sprint 3 |
| **Estado** | Pendiente |
| **Asignado a** | Por asignar |

---

## Historia de Usuario

**Como** usuario interesado en un curso,
**quiero** ver información detallada del curso antes de inscribirme,
**para** evaluar si el contenido se ajusta a mis objetivos de aprendizaje.

## Descripción Detallada

El usuario debe poder acceder a una página de detalle que muestre información completa del curso: descripción extendida, temario desglosado por módulos y lecciones, instructor, requisitos previos, objetivos de aprendizaje, reseñas de otros estudiantes, y botón de inscripción. Si el usuario ya está inscrito, debe mostrar su progreso y botón para continuar.

## Mockups/Wireframes

```
┌─────────────────────────────────────────────────────────────────┐
│  ← Volver al catálogo                                     👤    │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌────────────────────┐  FIBONACCI RETRACEMENT BÁSICO           │
│  │                    │  ⭐ 4.8 (89 reseñas) | 1,234 estudiantes│
│  │   [VIDEO INTRO]    │  Por: Carlos Mendoza | 2h 30m | 5 módul│
│  │    ▶ Preview       │                                          │
│  │                    │  [📥 Inscribirse gratis]                 │
│  └────────────────────┘                                          │
│                                                                  │
│  ┌────────────────────────────────────────────────────────────┐ │
│  │ PESTAÑAS: [Descripción] [Temario] [Instructor] [Reseñas]  │ │
│  └────────────────────────────────────────────────────────────┘ │
│                                                                  │
│  QUÉ APRENDERÁS                                                 │
│  ✓ Identificar niveles de Fibonacci en gráficos                │
│  ✓ Aplicar retrocesos en tendencias alcistas y bajistas        │
│  ✓ Combinar Fibonacci con otros indicadores                    │
│  ✓ Realizar entradas y salidas precisas                        │
│                                                                  │
│  REQUISITOS                                                      │
│  • Conocimientos básicos de trading                            │
│  • Familiaridad con gráficos de velas                          │
│                                                                  │
│  DESCRIPCIÓN                                                     │
│  Fibonacci es una herramienta fundamental del análisis técnico...│
│  [Texto completo de descripción del curso]                     │
│                                                                  │
│  PARA QUIÉN ES ESTE CURSO                                       │
│  • Traders principiantes que quieren dominar Fibonacci          │
│  • Analistas técnicos que buscan mejorar su precisión          │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘

[PESTAÑA TEMARIO]
┌─────────────────────────────────────────────────────────────────┐
│  📚 TEMARIO DEL CURSO                          5 módulos | 23 lecciones │
│                                                                  │
│  ▼ Módulo 1: Introducción a Fibonacci (30 min)                 │
│     1. ¿Qué es Fibonacci? (5:30) [🎬 Video] [Gratis]           │
│     2. Historia y fundamentos (8:45) [🎬 Video] [Gratis]       │
│     3. La secuencia de Fibonacci (10:20) [📄 Artículo]         │
│     4. Quiz: Fundamentos (15 preguntas) [📝 Quiz]              │
│                                                                  │
│  ▼ Módulo 2: Niveles de Retroceso (45 min)                     │
│     1. Niveles principales: 38.2%, 50%, 61.8% (12:15)          │
│     2. Cómo dibujar Fibonacci en gráfico (18:30)               │
│     3. Práctica: Identificar retrocesos (20:00)                │
│     4. Quiz: Niveles de retroceso                              │
│                                                                  │
│  ▶ Módulo 3: Fibonacci en Tendencias (35 min) [🔒 Bloqueado]  │
│  ▶ Módulo 4: Estrategias Avanzadas (25 min) [🔒 Bloqueado]    │
│  ▶ Módulo 5: Fibonacci + Otros Indicadores (15 min) [🔒]      │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
```

---

## Criterios de Aceptación

**Escenario 1: Ver detalle de curso no inscrito**
```gherkin
DADO que el usuario está autenticado
Y NO está inscrito en el curso
CUANDO accede a /education/courses/fibonacci-retracement-basico
ENTONCES se muestra la página de detalle del curso
Y se muestra: título, rating, estudiantes, instructor, duración
Y se muestra botón "Inscribirse" o "Inscribirse gratis"
Y se muestra video preview del curso (si existe)
Y se muestra descripción completa
Y se muestra temario desglosado por módulos
```

**Escenario 2: Ver detalle de curso inscrito**
```gherkin
DADO que el usuario está inscrito en el curso
Y tiene 60% de progreso
CUANDO accede al detalle del curso
ENTONCES se muestra barra de progreso "60% completado"
Y el botón principal dice "Continuar curso"
Y se destaca la última lección accedida
Y se muestra resumen de progreso: "14 de 23 lecciones completadas"
```

**Escenario 3: Ver temario completo**
```gherkin
DADO que el usuario está en la pestaña "Temario"
ENTONCES se muestran todos los módulos del curso
Y cada módulo muestra: título, duración total, número de lecciones
Y cada lección muestra: título, duración, tipo (video/artículo/quiz)
Y se puede expandir/colapsar cada módulo
Y lecciones gratuitas están marcadas como "Gratis"
Y lecciones bloqueadas muestran candado 🔒
```

**Escenario 4: Preview de lección gratuita**
```gherkin
DADO que el usuario NO está inscrito
Y el curso tiene lecciones marcadas como "Gratis"
CUANDO hace click en una lección gratuita
ENTONCES puede ver el contenido sin inscribirse
Y se muestra CTA "Inscríbete para acceder a todo el contenido"
```

**Escenario 5: Ver información del instructor**
```gherkin
DADO que el usuario está en la pestaña "Instructor"
ENTONCES se muestra: foto, nombre, título, biografía
Y se muestra lista de otros cursos del instructor
Y se muestran estadísticas: total estudiantes, cursos, rating promedio
Y se muestra botón "Ver perfil completo" (opcional)
```

**Escenario 6: Ver reseñas de estudiantes**
```gherkin
DADO que el usuario está en la pestaña "Reseñas"
ENTONCES se muestra rating promedio (ej: 4.8/5)
Y se muestra distribución de ratings (5★: 60%, 4★: 30%, etc.)
Y se muestran las últimas 10 reseñas
Y cada reseña muestra: nombre del usuario, fecha, rating, comentario
Y se puede filtrar por: Todas, 5★, 4★, 3★, 2★, 1★
```

**Escenario 7: Inscribirse en curso**
```gherkin
DADO que el usuario NO está inscrito
Y el curso es gratuito
CUANDO hace click en "Inscribirse gratis"
ENTONCES se registra la inscripción en backend
Y se muestra toast "¡Te has inscrito en el curso!"
Y el botón cambia a "Comenzar curso"
Y se navega a la primera lección al hacer click
```

**Escenario 8: Curso premium sin suscripción**
```gherkin
DADO que el curso es premium
Y el usuario NO tiene suscripción activa
CUANDO intenta inscribirse
ENTONCES se muestra modal "Este curso requiere suscripción Premium"
Y se muestra botón "Ver planes" que lleva a /pricing
Y NO se permite inscripción
```

## Criterios Adicionales

- [ ] Video preview auto-play al cargar página (muted)
- [ ] Compartir curso en redes sociales
- [ ] Agregar curso a "Guardados" (wishlist)
- [ ] Mostrar badge "Bestseller" si es top 10 más vendido
- [ ] Mostrar "Última actualización: DD/MM/YYYY"
- [ ] SEO optimizado con meta tags dinámicos
- [ ] Structured data (schema.org) para Google

---

## Tareas Técnicas

**Database:**
- [ ] DB-EDU-004: Verificar relación courses -> modules -> lessons
- [ ] DB-EDU-005: Tabla course_reviews para reseñas
- [ ] DB-EDU-006: Tabla course_enrollments para inscripciones

**Backend:**
- [ ] BE-EDU-008: Endpoint GET /education/courses/:slug
- [ ] BE-EDU-009: Endpoint POST /education/courses/:id/enroll
- [ ] BE-EDU-010: Endpoint GET /education/courses/:id/reviews
- [ ] BE-EDU-011: Implementar CourseService.getBySlug()
- [ ] BE-EDU-012: Implementar EnrollmentService.enroll()
- [ ] BE-EDU-013: Verificar acceso Premium para cursos pagos

**Frontend:**
- [ ] FE-EDU-009: Crear página CourseDetailPage.tsx
- [ ] FE-EDU-010: Crear componente CourseHeader.tsx
- [ ] FE-EDU-011: Crear componente CourseSyllabus.tsx (temario)
- [ ] FE-EDU-012: Crear componente InstructorCard.tsx
- [ ] FE-EDU-013: Crear componente CourseReviews.tsx
- [ ] FE-EDU-014: Crear componente EnrollButton.tsx
- [ ] FE-EDU-015: Implementar tabs de navegación
- [ ] FE-EDU-016: Modal de confirmación de inscripción

**Tests:**
- [ ] TEST-EDU-004: Test inscripción en curso gratuito
- [ ] TEST-EDU-005: Test bloqueo de curso premium
- [ ] TEST-EDU-006: Test E2E ver detalle e inscribirse

---

## Dependencias

**Depende de:**
- [ ] US-EDU-001: Ver catálogo - Estado: Pendiente
- [ ] US-AUTH-001: Autenticación - Estado: ✅ Completado

**Bloquea:**
- [ ] US-EDU-003: Iniciar lección
- [ ] US-EDU-007: Ver progreso

---

## Notas Técnicas

**Endpoints involucrados:**
| Método | Endpoint | Descripción |
|--------|----------|-------------|
| GET | /education/courses/:slug | Detalle completo del curso |
| POST | /education/courses/:id/enroll | Inscribirse en curso |
| GET | /education/courses/:id/reviews | Reseñas del curso |

**Response GET /courses/:slug:**
```typescript
{
  course: {
    id: "uuid-1",
    title: "Fibonacci Retracement Básico",
    slug: "fibonacci-retracement-basico",
    description: "Descripción completa del curso...",
    learningObjectives: [
      "Identificar niveles de Fibonacci",
      "Aplicar retrocesos en tendencias"
    ],
    requirements: [
      "Conocimientos básicos de trading",
      "Familiaridad con gráficos"
    ],
    targetAudience: [
      "Traders principiantes",
      "Analistas técnicos"
    ],
    category: {...},
    level: "beginner",
    duration: 150,
    moduleCount: 5,
    lessonCount: 23,
    studentCount: 1234,
    rating: 4.8,
    reviewCount: 89,
    instructor: {
      id: "inst-1",
      name: "Carlos Mendoza",
      avatar: "...",
      title: "Senior Trader",
      bio: "15 años de experiencia...",
      coursesCount: 8,
      studentsCount: 12500,
      rating: 4.9
    },
    isPremium: false,
    previewVideoUrl: "https://vimeo.com/...",
    updatedAt: "2025-11-20T10:00:00Z",
    publishedAt: "2025-11-15T10:00:00Z",

    modules: [
      {
        id: "mod-1",
        title: "Introducción a Fibonacci",
        order: 1,
        duration: 30,
        lessonCount: 4,
        lessons: [
          {
            id: "les-1",
            title: "¿Qué es Fibonacci?",
            type: "video",
            duration: 5.5,
            isFree: true,
            isCompleted: false,
            order: 1
          }
          // ... más lecciones
        ]
      }
      // ... más módulos
    ],

    userEnrollment: {
      enrolledAt: "2025-12-01T14:30:00Z",
      progressPercent: 60,
      lessonsCompleted: 14,
      lastAccessedLesson: {
        id: "les-14",
        title: "Fibonacci en tendencias bajistas"
      },
      lastAccessedAt: "2025-12-04T18:20:00Z"
    }
  }
}
```

**Entidades/Tablas:**
- `education.courses`
- `education.modules`
- `education.lessons`
- `education.course_enrollments`
- `education.course_reviews`
- `education.instructors`

---

## Definition of Ready (DoR)

- [x] Historia claramente escrita
- [x] Criterios de aceptación definidos
- [x] Story points estimados
- [x] Dependencias identificadas
- [x] Sin bloqueadores
- [x] Diseño/mockup disponible
- [x] API spec disponible

## Definition of Done (DoD)

- [ ] Código implementado según criterios
- [ ] Tests unitarios escritos y pasando
- [ ] Tests de integración pasando
- [ ] Code review aprobado
- [ ] Documentación actualizada
- [ ] QA aprobado
- [ ] Desplegado en ambiente de pruebas

---

## Historial de Cambios

| Fecha | Cambio | Autor |
|-------|--------|-------|
| 2025-12-05 | Creación | Requirements-Analyst |

---

**Creada por:** Requirements-Analyst
**Fecha:** 2025-12-05
**Última actualización:** 2025-12-05
