feat: display saved_for_later course enrollments (#1498)

Author: katrinan029

src/components/PeopleManagement/LearnerDetailPage/CourseEnrollments.jsx

@@ -12,7 +12,7 @@ const CourseEnrollments = ({ enrollments, isLoading }) => {
     description: 'Message displayed when a learner has no course enrollments',
   });
 
-  const enrollmentTypes = ['assignmentsForDisplay', 'inProgress', 'upcoming', 'completed'];
+  const enrollmentTypes = ['assignmentsForDisplay', 'inProgress', 'upcoming', 'savedForLater', 'completed'];
   const flattenedEnrollments = enrollmentTypes.flatMap(type => enrollments?.[type] || []);
   const hasEnrollments = flattenedEnrollments.length > 0;
 
@@ -60,6 +60,7 @@ CourseEnrollments.propTypes = {
     completed: PropTypes.arrayOf(enrollmentShape),
     inProgress: PropTypes.arrayOf(enrollmentShape),
     upcoming: PropTypes.arrayOf(enrollmentShape),
+    savedForLater: PropTypes.arrayOf(enrollmentShape),
     assignmentsForDisplay: PropTypes.arrayOf(enrollmentShape),
   }).isRequired,
   isLoading: PropTypes.bool.isRequired,

src/components/PeopleManagement/LearnerDetailPage/EnrollmentCard.jsx

@@ -23,6 +23,9 @@ const EnrollmentCard = ({ enrollment, enterpriseSlug }) => {
       case 'upcoming': {
         return (<Badge variant="info">Upcoming</Badge>);
       }
+      case 'saved_for_later': {
+        return (<Badge variant="dark">Saved for later</Badge>);
+      }
       default: {
         return (<Badge variant="info">Assigned</Badge>);
       }

src/components/PeopleManagement/tests/CourseEnrollments.test.jsx

@@ -41,6 +41,14 @@ const mockEnrollments = {
       courseRunStatus: 'completed',
     },
   ],
+  savedForLater: [
+    {
+      uuid: '5',
+      courseKey: 'course-5',
+      displayName: 'Course 5',
+      courseRunStatus: 'saved_for_later',
+    },
+  ],
   assignmentsForDisplay: [
     {
       uuid: '4',
@@ -84,31 +92,38 @@ describe('CourseEnrollments', () => {
   it('renders in-progress enrollments', () => {
     renderComponent({ enrollments: mockEnrollments, isLoading: false });
     const enrollmentCards = screen.getAllByTestId('enrollment-card');
-    expect(enrollmentCards).toHaveLength(4);
+    expect(enrollmentCards).toHaveLength(5);
     expect(screen.getByText('Course 1')).toBeInTheDocument();
   });
 
   it('renders upcoming enrollments', () => {
     renderComponent({ enrollments: mockEnrollments, isLoading: false });
     const enrollmentCards = screen.getAllByTestId('enrollment-card');
-    expect(enrollmentCards).toHaveLength(4);
+    expect(enrollmentCards).toHaveLength(5);
     expect(screen.getByText('Course 2')).toBeInTheDocument();
   });
 
   it('renders completed enrollments', () => {
     renderComponent({ enrollments: mockEnrollments, isLoading: false });
     const enrollmentCards = screen.getAllByTestId('enrollment-card');
-    expect(enrollmentCards).toHaveLength(4);
+    expect(enrollmentCards).toHaveLength(5);
     expect(screen.getByText('Course 3')).toBeInTheDocument();
   });
 
   it('renders assigned enrollments', () => {
     renderComponent({ enrollments: mockEnrollments, isLoading: false });
     const enrollmentCards = screen.getAllByTestId('enrollment-card');
-    expect(enrollmentCards).toHaveLength(4);
+    expect(enrollmentCards).toHaveLength(5);
     expect(screen.getByText('Course 4')).toBeInTheDocument();
   });
 
+  it('renders saved for later enrollments', () => {
+    renderComponent({ enrollments: mockEnrollments, isLoading: false });
+    const enrollmentCards = screen.getAllByTestId('enrollment-card');
+    expect(enrollmentCards).toHaveLength(5);
+    expect(screen.getByText('Course 5')).toBeInTheDocument();
+  });
+
   it('renders enrollments header', () => {
     renderComponent({ enrollments: mockEnrollments, isLoading: false });
     expect(screen.getByText('Enrollments')).toBeInTheDocument();