leangseu edx/has access split (#19)

src/containers/CourseCard/CourseCard.scss

@@ -1,3 +1,5 @@
+@import "@edx/paragon/scss/core/core";
+
 .course-card {
   .card {
     overflow: hidden;
@@ -17,6 +19,8 @@
     > .alert {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
+      box-shadow: none;
+      padding: map-get($spacers, 3) map-get($spacers, 4);
     }
   }
 }

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

@@ -13,43 +13,59 @@ export const CourseBanner = ({ cardId }) => {
     isVerified,
     isAuditAccessExpired,
     canUpgrade,
+    coursewareAccess = {},
   } = appHooks.useCardEnrollmentData(cardId);
   const courseRun = appHooks.useCardCourseRunData(cardId);
   const course = appHooks.useCardCourseData(cardId);
   const { formatMessage } = useIntl();
 
+  const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;
+
   if (isVerified) { return null; }
 
-  if (isAuditAccessExpired) {
-    if (canUpgrade) {
-      return (
+  return (
+    <>
+      {isAuditAccessExpired
+        && (canUpgrade ? (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            {formatMessage(messages.upgradeToAccess)}
+          </Banner>
+        ) : (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            {
+              <Hyperlink destination="">
+                {formatMessage(messages.findAnotherCourse)}
+              </Hyperlink>
+            }
+          </Banner>
+        ))}
+
+      {courseRun.isActive && !canUpgrade && (
         <Banner>
-          {formatMessage(messages.auditAccessExpired)}
+          {formatMessage(messages.upgradeDeadlinePassed)}
           {'  '}
-          {formatMessage(messages.upgradeToAccess)}
+          <Hyperlink destination={course.website || ''}>
+            {formatMessage(messages.exploreCourseDetails)}
+          </Hyperlink>
         </Banner>
-      );
-    }
-    return (
-      <Banner>
-        {formatMessage(messages.auditAccessExpired)}
-        {'  '}
-        <Hyperlink destination="">{formatMessage(messages.findAnotherCourse)}</Hyperlink>
-      </Banner>
-    );
-  }
-  if (courseRun.isActive && !canUpgrade) {
-    return (
-      <Banner>
-        {formatMessage(messages.upgradeDeadlinePassed)}
-        {'  '}
-        <Hyperlink destination={course.website || ''}>
-          {formatMessage(messages.exploreCourseDetails)}
-        </Hyperlink>
-      </Banner>
-    );
-  }
-  return null;
+      )}
+      {isTooEarly && (
+        <Banner>
+          {formatMessage(messages.courseHasNotStarted, {
+            startDate: courseRun.startDate,
+          })}
+        </Banner>
+      )}
+      {hasUnmetPrerequisites && (
+        <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
+      )}
+      {isStaff && <Banner>{formatMessage(messages.staffAccessOnly)}</Banner>}
+    </>
+  );
 };
 CourseBanner.propTypes = {
   cardId: PropTypes.string.isRequired,

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

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import { Hyperlink } from '@edx/paragon';
 
 import { hooks as appHooks } from 'data/redux';
+import { formatMessage } from 'testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
@@ -24,9 +25,15 @@ const enrollmentData = {
   isVerified: false,
   canUpgrade: false,
   isAuditAccessExpired: false,
+  coursewareAccess: {
+    hasUnmetPrerequisites: false,
+    isStaff: false,
+    isTooEarly: false,
+  },
 };
 const courseRunData = {
   isActive: false,
+  startDate: '11/11/3030',
 };
 const courseData = {
   website: 'test-course-website',
@@ -104,8 +111,54 @@ describe('CourseBanner', () => {
   });
   test('no display if audit access not expired and (course is not active or can upgrade)', () => {
     render();
-    expect(el.isEmptyRender()).toEqual(true);
+    // isEmptyRender() isn't true because the minimal is <Fragment />
+    expect(el.html()).toEqual('');
     render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
-    expect(el.isEmptyRender()).toEqual(true);
+    expect(el.html()).toEqual('');
+  });
+  describe('unmet prerequisites', () => {
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+    });
+    test('snapshot: unmetPrerequisites', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: prerequisitesNotMet', () => {
+      expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
+    });
+  });
+  describe('too early', () => {
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
+    });
+    test('snapshot: tooEarly', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: courseHasNotStarted', () => {
+      expect(el.text()).toContain(formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }));
+    });
+  });
+  describe('staff', () => {
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { isStaff: true } } });
+    });
+    test('snapshot: isStaff', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: staffAccessOnly', () => {
+      expect(el.text()).toContain(messages.staffAccessOnly.defaultMessage);
+    });
+  });
+  test('snapshot: stacking banners', () => {
+    render({
+      enrollment: {
+        coursewareAccess: {
+          isStaff: true,
+          isTooEarly: true,
+          hasUnmetPrerequisites: true,
+        },
+      },
+    });
+    expect(el).toMatchSnapshot();
   });
 });

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

@@ -1,33 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CourseBanner audit access expired, can upgrade snapshot: (auditAccessExpired, upgradeToAccess) 1`] = `
-<Banner>
-  Your audit access to this course has expired.
-    
-  Upgrade now to access your course again.
-</Banner>
+<Fragment>
+  <Banner>
+    Your audit access to this course has expired.
+      
+    Upgrade now to access your course again.
+  </Banner>
+</Fragment>
 `;
 
 exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
-<Banner>
-  Your audit access to this course has expired.
-    
-  <Hyperlink
-    destination=""
-  >
-    Find another course
-  </Hyperlink>
-</Banner>
+<Fragment>
+  <Banner>
+    Your audit access to this course has expired.
+      
+    <Hyperlink
+      destination=""
+    >
+      Find another course
+    </Hyperlink>
+  </Banner>
+</Fragment>
 `;
 
 exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink) 1`] = `
-<Banner>
-  Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.
-    
-  <Hyperlink
-    destination="test-course-website"
-  >
-    Explore course details.
-  </Hyperlink>
-</Banner>
+<Fragment>
+  <Banner>
+    Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.
+      
+    <Hyperlink
+      destination="test-course-website"
+    >
+      Explore course details.
+    </Hyperlink>
+  </Banner>
+</Fragment>
+`;
+
+exports[`CourseBanner snapshot: stacking banners 1`] = `
+<Fragment>
+  <Banner>
+    You can't access this course just yet because the course hasn't started yet. The course will start on 11/11/3030.
+  </Banner>
+  <Banner>
+    You can't access this course just yet because you have not met the pre-requisites.
+  </Banner>
+  <Banner>
+    Staff access only.
+  </Banner>
+</Fragment>
+`;
+
+exports[`CourseBanner staff snapshot: isStaff 1`] = `
+<Fragment>
+  <Banner>
+    Staff access only.
+  </Banner>
+</Fragment>
+`;
+
+exports[`CourseBanner too early snapshot: tooEarly 1`] = `
+<Fragment>
+  <Banner>
+    You can't access this course just yet because the course hasn't started yet. The course will start on 11/11/3030.
+  </Banner>
+</Fragment>
+`;
+
+exports[`CourseBanner unmet prerequisites snapshot: unmetPrerequisites 1`] = `
+<Fragment>
+  <Banner>
+    You can't access this course just yet because you have not met the pre-requisites.
+  </Banner>
+</Fragment>
 `;

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

@@ -96,6 +96,21 @@ export const messages = StrictDict({
     description: 'Entitlement session selection link text',
     defaultMessage: 'select a session',
   },
+  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.',
+  },
+  courseHasNotStarted: {
+    id: 'learner-dash.courseCard.banners.courseHasNotStarted',
+    description: 'Course has not started message',
+    defaultMessage: 'You can\'t access this course just yet because the course hasn\'t started yet. The course will start on {startDate}.',
+  },
+  staffAccessOnly: {
+    id: 'learner-dash.courseCard.banners.staffAccessOnly',
+    description: 'Message to learners with staff access only',
+    defaultMessage: 'Staff access only.',
+  },
 });
 
 export default messages;