richie-education 3.3.1-dev12 → 3.3.1-dev13

package/js/widgets/SyllabusCourseRunsList/components/SyllabusAsideList/index.tsx

@@ -18,17 +18,6 @@ const messages = defineMessages({
       'Message displayed on the top of course runs list on syllabus when there is 0 or multiple course runs opened',
     defaultMessage: 'Course runs',
   },
-  noCourseRuns: {
-    id: 'components.SyllabusAsideList.noCourseRuns',
-    description: 'Message displayed on syllabus when there are no course runs to show',
-    defaultMessage: 'No course runs',
-  },
-  noOtherCourseRuns: {
-    id: 'components.SyllabusAsideList.noOtherCourseRuns',
-    description:
-      'Message displayed on syllabus when there are no other course runs to show than the only one opened',
-    defaultMessage: 'No other course runs',
-  },
   toBeScheduled: {
     id: 'components.SyllabusAsideList.toBeScheduled',
     description: 'Message displayed on syllabus when there are course runs to be scheduled',
@@ -108,28 +97,20 @@ export const SyllabusAsideList = ({
 
   const showLanguages = CourseRunHelper.IsAllCourseRunsWithSameLanguages(courseRuns);
 
+  // If there are no runs to display at all, don't render anything
+  if (openedRuns.length <= 1 && otherRuns.length === 0) {
+    return null;
+  }
+
   return (
     <>
       <h2 className="course-detail__title">
-        {openedRuns.length === 1 ? (
-          <FormattedMessage {...messages.otherCourseRuns} />
-        ) : (
+        {openedRuns.length > 1 ? (
           <FormattedMessage {...messages.courseRunsTitle} />
+        ) : (
+          <FormattedMessage {...messages.otherCourseRuns} />
         )}
       </h2>
-      {openedRuns.length <= 1 && otherRuns.length === 0 && (
-        <div className="course-detail__row course-detail__no-runs">
-          {openedRuns.length === 0 ? (
-            <p>
-              <FormattedMessage {...messages.noCourseRuns} />
-            </p>
-          ) : (
-            <p>
-              <FormattedMessage {...messages.noOtherCourseRuns} />
-            </p>
-          )}
-        </div>
-      )}
       {openedRuns.length > 1 && (
         <div
           id="courseDetailsRunsOpen"

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRunCompacted/index.tsx

@@ -34,13 +34,18 @@ const messages = defineMessages({
   selfPaceRunPeriod: {
     id: 'components.SyllabusCourseRunCompacted.selfPaceCoursePeriod',
     description: 'Course date of an opened and self paced course run block',
-    defaultMessage: 'Available until {endDate}',
+    defaultMessage: 'Until {endDate, select, undefined {} other {{endDate}}}',
   },
   selfPaceNoEndDate: {
     id: 'components.SyllabusCourseRunCompacted.selfPaceNoEndDate',
     description: 'Self paced course run block with no end date',
     defaultMessage: 'Available',
   },
+  enrollment: {
+    id: 'components.SyllabusCourseRun.enrollment',
+    description: 'Title of the enrollment dates section of an opened course run block',
+    defaultMessage: 'Enrollment',
+  },
   coursePrice: {
     id: 'components.SyllabusCourseRunCompacted.coursePrice',
     description: 'Title of the course enrollment price section of an opened course run block',
@@ -105,6 +110,7 @@ const OpenedSelfPacedCourseRun = ({
   let enrollmentDiscountedPrice = '';
   let certificatePrice = '';
   let certificateDiscountedPrice = '';
+  const enrollmentEnd = courseRun.enrollment_end ? formatDate(courseRun.enrollment_end) : '...';
 
   if (courseRun.offer) {
     const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
@@ -157,23 +163,41 @@ const OpenedSelfPacedCourseRun = ({
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
       <dl>
-        {!showLanguages && (
-          <dt>
-            <FormattedMessage {...messages.course} />
-          </dt>
+        {hasEndDate ? (
+          <>
+            <dt>
+              <FormattedMessage {...messages.enrollment} />
+            </dt>
+            <dd>
+              <FormattedMessage
+                {...messages.selfPaceRunPeriod}
+                values={{
+                  endDate: enrollmentEnd,
+                }}
+              />
+            </dd>
+            <dt>
+              <FormattedMessage {...messages.course} />
+            </dt>
+            <dd>
+              <FormattedMessage
+                {...messages.selfPaceRunPeriod}
+                values={{
+                  endDate: end,
+                }}
+              />
+            </dd>
+          </>
+        ) : (
+          <>
+            <dt>
+              <FormattedMessage {...messages.enrollment} />
+            </dt>
+            <dd>
+              <FormattedMessage {...messages.selfPaceNoEndDate} />
+            </dd>
+          </>
         )}
-        <dd>
-          {hasEndDate ? (
-            <FormattedMessage
-              {...messages.selfPaceRunPeriod}
-              values={{
-                endDate: end,
-              }}
-            />
-          ) : (
-            <FormattedMessage {...messages.selfPaceNoEndDate} />
-          )}
-        </dd>
         {!showLanguages && (
           <>
             <dt>

package/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -172,7 +172,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     });
     const runContainer = heading.parentNode! as HTMLElement;
     const courseDatesText = courseRun.end
-      ? `Available until ${intl.formatDate(new Date(courseRun.end), DEFAULT_DATE_FORMAT)}`
+      ? `Until ${intl.formatDate(new Date(courseRun.end), DEFAULT_DATE_FORMAT)}`
       : `Available`;
 
     const courseDatesContainer = getByText(runContainer, courseDatesText);
@@ -221,7 +221,7 @@ describe('<SyllabusCourseRunsList/>', () => {
   const expectEmptyPortalContainer = () => {
     // This way of testing is a bit hard but we are SURE that there is no other content. This way
     // we are also testing the absence of other elements.
-    expect(getPortalContainer().textContent).toEqual('Other course runsNo other course runs');
+    expect(getPortalContainer().textContent).toContain('Other course runs');
   };
 
   it('has no opened course run', async () => {
@@ -390,10 +390,13 @@ describe('<SyllabusCourseRunsList/>', () => {
     const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
       resource_link: resourceLink,
     }).one();
+    const archivedCourseRun = CourseRunFactoryFromPriority(Priority.ARCHIVED_CLOSED)({
+      resource_link: resourceLink,
+    }).one();
 
     render(
       <SyllabusCourseRunsList
-        courseRuns={[courseRun]}
+        courseRuns={[courseRun, archivedCourseRun]}
         course={course}
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,
@@ -412,12 +415,42 @@ describe('<SyllabusCourseRunsList/>', () => {
     expectEmptyPortalContainer();
   });
 
+  it('has only one opened product', async () => {
+    const course = PacedCourseFactory().one();
+    const offering = OfferingFactory().one();
+    const resourceLink = `https://joanie.endpoint/api/v1.0/courses/${course.code}/products/${offering.product.id}/`;
+    fetchMock.get(resourceLink, offering);
+
+    const courseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      resource_link: resourceLink,
+    }).one();
+
+    render(
+      <SyllabusCourseRunsList
+        courseRuns={[courseRun]}
+        course={course}
+        maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
+      />,
+      {
+        queryOptions: { client: createTestQueryClient({ user: null }) },
+      },
+    );
+
+    // Header.
+    expect(getHeaderContainer().querySelectorAll('.course-detail__run-descriptions').length).toBe(
+      1,
+    );
+    await expectCourseProduct(getHeaderContainer(), offering);
+  });
+
   it('renders a specific title in portal when there is one opened course run', () => {
     const course = PacedCourseFactory().one();
+    const ongoingOpenCourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one();
+    const archivedCourseRun = CourseRunFactoryFromPriority(Priority.ARCHIVED_CLOSED)().one();
 
     render(
       <SyllabusCourseRunsList
-        courseRuns={[CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)().one()]}
+        courseRuns={[ongoingOpenCourseRun, archivedCourseRun]}
         course={course}
         maxArchivedCourseRuns={MAX_ARCHIVED_COURSE_RUNS}
       />,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.3.1-dev12",
+  "version": "3.3.1-dev13",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {