feat: add support to hasUnmetPrerequisitesList in CourseBanner

Author: jignaciopm

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx

@@ -18,7 +18,12 @@ export const CourseBanner = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const formatDate = utilHooks.useFormatDate();
 
-  const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;
+  const {
+    hasUnmetPrerequisites,
+    isStaff,
+    isTooEarly,
+    hasUnmetPrerequisitesList,
+  } = coursewareAccess;
 
   if (isVerified) { return null; }
 
@@ -44,7 +49,15 @@ export const CourseBanner = ({ cardId }) => {
       )}
 
       {(!isStaff && hasUnmetPrerequisites) && (
-        <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
+        <Banner>
+          {formatMessage(messages.prerequisitesNotMet)}
+          {hasUnmetPrerequisitesList.length > 0 && hasUnmetPrerequisitesList.map((prerequisite, index) => (
+            <>
+              <span>{index > 0 ? ', ' : ' '}</span>
+              <a href={prerequisite.about_url}>{prerequisite.display}</a>
+            </>
+          ))}
+        </Banner>
       )}
     </>
   );

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx

@@ -71,9 +71,31 @@ describe('CourseBanner', () => {
   });
   describe('unmet prerequisites', () => {
     it('should display correct message', () => {
-      renderCourseBanner({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+      renderCourseBanner({
+        enrollment: {
+          coursewareAccess: {
+            hasUnmetPrerequisites: true,
+            hasUnmetPrerequisitesList: [
+              {
+                display: 'Prereq Course 1',
+                about_url: 'https://example.com/about-1',
+              },
+              {
+                display: 'Prereq Course 2',
+                about_url: 'https://example.com/about-2',
+              },
+            ],
+          },
+        },
+      });
       const preReqText = screen.getByText(formatMessage(messages.prerequisitesNotMet));
       expect(preReqText).toBeInTheDocument();
+      const preReqList1 = screen.getByText('Prereq Course 1');
+      const preReqList2 = screen.getByText('Prereq Course 2');
+      expect(preReqList1).toBeInTheDocument();
+      expect(preReqList2).toBeInTheDocument();
+      expect(preReqList1).toHaveAttribute('href', 'https://example.com/about-1');
+      expect(preReqList2).toHaveAttribute('href', 'https://example.com/about-2');
     });
   });
   describe('too early', () => {

src/containers/CourseCard/components/CourseCardBanners/messages.js

@@ -94,7 +94,7 @@ const messages = defineMessages({
   prerequisitesNotMet: {
     id: 'learner-dash.courseCard.banners.prerequisitesNotMet',
     description: 'Message to learners with unmet prerequisites',
-    defaultMessage: 'You can\'t access this course just yet because you have not met the pre-requisites.',
+    defaultMessage: 'You can\'t access this course just yet because you have not met the following pre-requisites:',
   },
   courseHasNotStarted: {
     id: 'learner-dash.courseCard.banners.courseHasNotStarted',