feat: add support to hasUnmetPrerequisitesList in CourseBanner

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',

src/containers/CourseCard/components/hooks.js

@@ -3,27 +3,59 @@ import { reduxHooks } from 'hooks';
 export const useActionDisabledState = (cardId) => {
   const { isMasquerading } = reduxHooks.useMasqueradeData();
   const {
-    hasAccess, isAudit, isAuditAccessExpired,
+    hasAccess, isAudit, isAuditAccessExpired, coursewareAccess,
   } = reduxHooks.useCardEnrollmentData(cardId);
   const {
     isEntitlement, isFulfilled, canChange, hasSessions,
   } = reduxHooks.useCardEntitlementData(cardId);
 
   const { resumeUrl, homeUrl } = reduxHooks.useCardCourseRunData(cardId);
 
-  const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
-  const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
-  const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
-  const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
+  const isStaff = Boolean(coursewareAccess?.isStaff) || false;
+  const blockedByPrereqs = Boolean(coursewareAccess?.hasUnmetPrerequisites);
 
-  const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
+  const disableBeginCourse = !isStaff && (
+    !homeUrl
+    || isMasquerading
+    || !hasAccess
+    || (isAudit && isAuditAccessExpired)
+    || blockedByPrereqs
+  );
+
+  const disableResumeCourse = !isStaff && (
+    !resumeUrl
+    || (isMasquerading
+    || !hasAccess
+    || (isAudit && isAuditAccessExpired))
+    || blockedByPrereqs
+  );
+
+  const disableViewCourse = !isStaff && (
+    !hasAccess
+    || (isAudit && isAuditAccessExpired)
+    || blockedByPrereqs
+  );
+
+  const disableSelectSession = !isStaff && (
+    !isEntitlement
+    || isMasquerading
+    || !hasAccess
+    || (!canChange || !hasSessions)
+    || blockedByPrereqs
+  );
+
+  const disableCourseTitle = !isStaff && (
+    (isEntitlement && !isFulfilled)
+    || disableViewCourse
+  );
 
   return {
     disableBeginCourse,
     disableResumeCourse,
     disableViewCourse,
     disableSelectSession,
     disableCourseTitle,
+    blockedByPrereqs,
   };
 };