Course Page: More enrollment dates updates (#1951)

mitodl · Oct 16, 2023 · 17c7a6c · 17c7a6c
1 parent 9c8a402
commit 17c7a6c
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 21 deletions.
diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
@@ -250,6 +250,12 @@ body.new-design {
               padding-left: 0;
               background-color: transparent;
             }
+            button.more-dates-link.enrolled {
+              color: $green-darker;
+              cursor: default;
+              text-decoration-line: none;
+
+            }
           }
         }
 

diff --git a/frontend/public/src/components/CourseInfoBox.js b/frontend/public/src/components/CourseInfoBox.js
@@ -32,6 +32,12 @@ const getStartDateText = (run: BaseCourseRun, isArchived: boolean = false) => {
     : "Start Anytime"
 }
 
+const getStartDateForRun = (run: BaseCourseRun) => {
+  return run && !emptyOrNil(run.start_date) && !run.is_self_paced
+    ? formatPrettyDate(moment(new Date(run.start_date)))
+    : "Start Anytime"
+}
+
 export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProps> {
   state = {
     showMoreEnrollDates: false
@@ -60,7 +66,7 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
               className="more-dates-link"
               onClick={() => this.setRunEnrollDialog(run)}
             >
-              {getStartDateText(run)}
+              {getStartDateForRun(run)}
             </button>
           ) : (
             <form action="/enrollments/" method="post">
@@ -71,7 +77,7 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
               />
               <input type="hidden" name="run" value={run ? run.id : ""} />
               <button type="submit" className="more-dates-link">
-                {getStartDateText(run)}
+                {getStartDateForRun(run)}
               </button>
             </form>
           )}
@@ -87,11 +93,18 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
     return !currentUser || !currentUser.id ? (
       <>
         <a href={routes.login} className="more-dates-link">
-          {getStartDateText(run)}
+          {getStartDateForRun(run)}
         </a>
       </>
     ) : null
   }
+  renderEnrolledDateLink(run: EnrollmentFlaggedCourseRun) {
+    return (
+      <button className="more-dates-link enrolled">
+        {getStartDateText(run)} - Enrolled
+      </button>
+    )
+  }
 
   render() {
     const { courses, courseRuns } = this.props
@@ -115,9 +128,13 @@ export default class CourseInfoBox extends React.PureComponent<CourseInfoBoxProp
     const moreEnrollableCourseRuns = courseRuns && courseRuns.length > 1
     if (moreEnrollableCourseRuns) {
       courseRuns.forEach((courseRun, index) => {
-        if (!courseRun.is_enrolled) {
+        if (courseRun.id !== run.id) {
           startDates.push(
-            <li key={index}>{this.renderEnrollNowDateLink(courseRun)}</li>
+            <li key={index}>
+              {courseRun.is_enrolled
+                ? this.renderEnrolledDateLink(courseRun)
+                : this.renderEnrollNowDateLink(courseRun)}
+            </li>
           )
         }
       })

diff --git a/frontend/public/src/components/CourseProductDetailEnroll.js b/frontend/public/src/components/CourseProductDetailEnroll.js
@@ -143,6 +143,14 @@ export class CourseProductDetailEnroll extends React.Component<
       currentCourseRun: courseRun
     })
   }
+  getFirstUnexpiredRun = () => {
+    const { courses, courseRuns } = this.props
+    return courseRuns
+      ? courses && courses[0].next_run_id
+        ? courseRuns.find(elem => elem.id === courses[0].next_run_id)
+        : courseRuns[0]
+      : null
+  }
 
   getCurrentCourseRun = (): EnrollmentFlaggedCourseRun => {
     return this.state.currentCourseRun
@@ -402,7 +410,11 @@ export class CourseProductDetailEnroll extends React.Component<
     )
   }
 
-  renderEnrolledButton(run: EnrollmentFlaggedCourseRun, startDate: any) {
+  renderEnrolledButton(run: EnrollmentFlaggedCourseRun) {
+    const startDate =
+      run && !emptyOrNil(run.start_date)
+        ? moment(new Date(run.start_date))
+        : null
     const waitingForCourseToBeginMessage = moment().isBefore(startDate) ? (
       <p style={{ fontSize: "16px" }}>
         Enrolled and waiting for the course to begin.
@@ -499,17 +511,12 @@ export class CourseProductDetailEnroll extends React.Component<
     } = this.props
     const showNewDesign = checkFeatureFlag("mitxonline-new-product-page")
 
-    let run =
-      !this.getCurrentCourseRun() && !courseRuns
-        ? null
-        : !this.getCurrentCourseRun() && courseRuns
-          ? this.getFirstUnenrolledCourseRun()
-          : this.getCurrentCourseRun()
-
-    if (run) this.updateDate(run)
-
-    let product = run && run.products ? run.products[0] : null
+    let run,
+      product = null
     if (courseRuns) {
+      run = this.getFirstUnexpiredRun()
+      product = run && run.products ? run.products[0] : null
+      this.updateDate(run)
       const thisScope = this
       courseRuns.map(courseRun => {
         // $FlowFixMe
@@ -524,18 +531,14 @@ export class CourseProductDetailEnroll extends React.Component<
         })
       })
     }
-    const startDate =
-      run && !emptyOrNil(run.start_date)
-        ? moment(new Date(run.start_date))
-        : null
 
     return (
       <>
         {
           // $FlowFixMe: isLoading null or undefined
           <Loader key="product_detail_enroll_loader" isLoading={isLoading}>
             <>
-              {this.renderEnrolledButton(run, startDate)}
+              {this.renderEnrolledButton(run)}
               {this.renderEnrollLoginButton()}
               {this.renderEnrollNowButton(run, product)}