From 17c7a6c8866e835fb9df0c8d9e2eb3d2267edbd0 Mon Sep 17 00:00:00 2001
From: Anna Gavrilman <annagav@users.noreply.github.com>
Date: Mon, 16 Oct 2023 08:36:50 -0400
Subject: [PATCH] Course Page: More enrollment dates updates (#1951)

---
 .../scss/product-page/product-details.scss    |  6 ++++
 .../public/src/components/CourseInfoBox.js    | 27 +++++++++++---
 .../components/CourseProductDetailEnroll.js   | 35 ++++++++++---------
 3 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/frontend/public/scss/product-page/product-details.scss b/frontend/public/scss/product-page/product-details.scss
index 5cc1cfb183..7cb52c5506 100644
--- 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
index de9da4be64..d3cdf2869b 100644
--- 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
index dfcdc39717..8cec84ff8e 100644
--- 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,10 +531,6 @@ export class CourseProductDetailEnroll extends React.Component<
         })
       })
     }
-    const startDate =
-      run && !emptyOrNil(run.start_date)
-        ? moment(new Date(run.start_date))
-        : null
 
     return (
       <>
@@ -535,7 +538,7 @@ export class CourseProductDetailEnroll extends React.Component<
           // $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)}