feat: streamline course enrollment flow with status indicators and CTAs #849
Conversation
Enrollment API Enhancements:
- Extended /api/enrollment/enroll to support GET requests
- Fetch user enrollments with course details
- Order enrollments by most recent first
Courses Index Page Updates:
- Added enrollment status fetching on page load
- Display "Enrolled" badge on enrolled verticals
- Dynamic button text ("Continue Learning" vs "View Vertical")
- Vertical-to-course mapping for enrollment checking
- Support for Software Engineering, Data Engineering, and AI Engineering verticals
Individual Course Page Updates (software-engineering.tsx):
- Fetch and display enrollment status
- Show "You're enrolled" badge when user is enrolled
- Display "Enroll in Vertical" CTA when not enrolled
- Placeholder enrollment handler (to be configured with actual course IDs)
- Real-time enrollment state management
Student Benefits:
- Clear visibility into enrollment status across all verticals
- Streamlined navigation with contextual CTAs
- Consistent enrollment experience across course pages
- Foundation for future enrollment automation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR adds enrollment status visibility and management to the course platform. It enables users to see which verticals they're enrolled in and provides contextual CTAs based on enrollment state.
Key Changes:
- Extended the enrollment API endpoint to support GET requests for fetching user enrollments with course details
- Added enrollment status indicators ("Enrolled" badges) to course vertical cards on the index page
- Implemented dynamic CTA text that changes from "View Vertical" to "Continue Learning" for enrolled verticals
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/pages/api/enrollment/enroll.ts | Added GET method support to fetch user enrollments with course details, ordered by enrollment date |
| src/pages/courses/index.tsx | Added enrollment fetching, vertical-to-course mapping, status badges, and dynamic button text based on enrollment state |
| src/pages/courses/software-engineering.tsx | Added enrollment status display with "You're enrolled" badge and placeholder enrollment handler for individual course page |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const isEnrolledInVertical = (verticalSlug: string): boolean => { | ||
| const matchingTitles = verticalCourseMap[verticalSlug] || []; | ||
| return enrollments.some( | ||
| (enrollment) => | ||
| enrollment.status === "ACTIVE" && | ||
| matchingTitles.some((title) => | ||
| enrollment.courseId.toLowerCase().includes(title.toLowerCase()) | ||
| ) | ||
| ); | ||
| }; |
There was a problem hiding this comment.
The enrollment check is comparing the courseId field with course title strings, but based on the API response structure, courseId is likely an ID (string), not a title. The comparison should use enrollment.course.title instead of enrollment.courseId to properly match against the title patterns in verticalCourseMap.
| const isEnrolled = (): boolean => { | ||
| const matchingTitles = ["Software Engineering", "Full-Stack Development", "Web Development"]; | ||
| return enrollments.some( | ||
| (enrollment) => | ||
| enrollment.status === "ACTIVE" && | ||
| matchingTitles.some((title) => | ||
| enrollment.courseId.toLowerCase().includes(title.toLowerCase()) | ||
| ) | ||
| ); | ||
| }; |
There was a problem hiding this comment.
The enrollment check is comparing courseId with course title strings, but courseId is an ID field, not a title. Based on the API response that includes course details, this should use enrollment.course.title instead of enrollment.courseId.
|
|
||
| type Enrollment = { | ||
| id: string; | ||
| courseId: string; | ||
| status: string; | ||
| progress: number; |
There was a problem hiding this comment.
The Enrollment type definition doesn't match the API response structure. According to the API implementation in enroll.ts, enrollments include a nested course object with fields like id, title, description, imageUrl, difficulty, and category. The type should include a course property with these fields.
| type Enrollment = { | |
| id: string; | |
| courseId: string; | |
| status: string; | |
| progress: number; | |
| type CourseInfo = { | |
| id: string; | |
| title: string; | |
| description: string; | |
| imageUrl: string; | |
| difficulty: string; | |
| category: string; | |
| }; | |
| type Enrollment = { | |
| id: string; | |
| courseId: string; | |
| status: string; | |
| progress: number; | |
| course: CourseInfo; |
| id: string; | ||
| courseId: string; | ||
| status: string; | ||
| progress: number; |
There was a problem hiding this comment.
The Enrollment type definition doesn't match the API response structure. The API returns enrollments with a nested course object containing id, title, description, imageUrl, difficulty, and category fields. Update the type to include a course property with these fields.
| progress: number; | |
| progress: number; | |
| course: { | |
| id: string; | |
| title: string; | |
| description: string; | |
| imageUrl: string; | |
| difficulty: string; | |
| category: string; | |
| }; |
|
🔍 Code Quality Score Breakdown:
💡 Recommendations:
|
Enrollment API Enhancements:
Courses Index Page Updates:
Individual Course Page Updates (software-engineering.tsx):
Student Benefits: