♻️(course-runs): refactor self paced course availability presentation

- Changed self paced course availability presentation
- Remove the entire run component if other runs list is empty

Author: Tiago-Salles

src/frontend/js/widgets/SyllabusCourseRunsList/components/SyllabusAsideList/index.tsx

@@ -108,28 +108,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"

src/frontend/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,19 +163,32 @@ const OpenedSelfPacedCourseRun = ({
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
       <dl>
-        {!showLanguages && (
-          <dt>
-            <FormattedMessage {...messages.course} />
-          </dt>
-        )}
         <dd>
           {hasEndDate ? (
-            <FormattedMessage
-              {...messages.selfPaceRunPeriod}
-              values={{
-                endDate: end,
-              }}
-            />
+            <>
+              <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>
+            </>
           ) : (
             <FormattedMessage {...messages.selfPaceNoEndDate} />
           )}