Add Go To Course button (#2349)

frontend/public/scss/dashboard.scss

@@ -74,7 +74,7 @@ $enrolled-passed-fg: #ffffff;
 
     div.row {
       margin: 0 !important;
-      padding: 20px;
+      padding: 20px 30px;
       height: 100%;
     }
 
@@ -108,6 +108,7 @@ $enrolled-passed-fg: #ffffff;
     }
 
     .course-card-text-details {
+      padding: 0 0 0 20px;
 
       @include media-breakpoint-down(sm)  {
         padding: 15px 0px 15px 0px;
@@ -147,8 +148,7 @@ $enrolled-passed-fg: #ffffff;
   }
 
   button.dot-menu {
-    // Setting height so the button element doesn't expand to cover the full height of the row
-    height: $material-icon-height;
+    vertical-align: -webkit-baseline-middle;
   }
 
   .certificate-container {
@@ -200,7 +200,7 @@ $enrolled-passed-fg: #ffffff;
   .upgrade-item-description {
     width: 100%;
     flex-direction: row !important;
-    padding: 25px 30px;
+    padding: 15px 30px;
     border-top: $home-page-border-grey;
     background: $home-page-grey-lite;
 
@@ -209,6 +209,7 @@ $enrolled-passed-fg: #ffffff;
     }
 
     div.certificate-upgrade-message {
+      padding-left: 30px;
       width: 80%;
       font-size: 16px;
       line-height: 30px;
@@ -270,9 +271,13 @@ $enrolled-passed-fg: #ffffff;
       }
     }
   }
-
-  .get-cert-button-container button, .finaid-link-container {
-    font-size: 14px !important;
+  .goto-course-wrapper {
+    a {
+      width: fit-content;
+    }
+  }
+  .get-cert-button-container button, .finaid-link-container, a.btn-primary {
+    font-size: 14px;
 
     @include media-breakpoint-down(sm) {
       width: 100%;

frontend/public/src/components/EnrolledItemCard.js

@@ -1,7 +1,11 @@
 /* global SETTINGS:false */
 import React from "react"
 import moment from "moment"
-import { parseDateString, formatPrettyDateTimeAmPmTz } from "../lib/util"
+import {
+  parseDateString,
+  formatPrettyDateTimeAmPmTz,
+  formatPrettyMonthDate
+} from "../lib/util"
 import { Formik, Form, Field } from "formik"
 import {
   Dropdown,
@@ -402,21 +406,6 @@ export class EnrolledItemCard extends React.Component<
 
     const { menuVisibility } = this.state
 
-    const title = isLinkableCourseRun(enrollment.run, currentUser) ? (
-      <a
-        href={enrollment.run.courseware_url}
-        onClick={ev =>
-          redirectToCourseHomepage(enrollment.run.courseware_url, ev)
-        }
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        {enrollment.run.course.title}
-      </a>
-    ) : (
-      enrollment.run.course.title
-    )
-
     const financialAssistanceLink =
       isFinancialAssistanceAvailable(enrollment.run) &&
       !enrollment.approved_flexible_price_exists ? (
@@ -430,30 +419,31 @@ export class EnrolledItemCard extends React.Component<
 
     const certificateLinksStyles = isProgramCard ?
       "upgrade-item-description d-md-flex align-items-start justify-content-between flex-column" :
-      "upgrade-item-description d-md-flex align-items-start justify-content-between"
+      "upgrade-item-description d-md-flex"
     const certificateLinksIntStyles = isProgramCard ?
       "d-flex d-md-flex flex-column align-items-start justify-content-center" :
-      "d-flex d-md-flex flex-column align-items-start justify-content-center"
+      "d-flex d-md-flex flex-column justify-content-center"
 
     const certificateLinks =
       enrollment.run.products.length > 0 &&
       enrollment.enrollment_mode === "audit" &&
       enrollment.run.is_upgradable ? (
           <div className={certificateLinksStyles}>
-            <div className="certificate-upgrade-message">
-              <p>
-                <strong>Upgrade today</strong> and, upon passing, receive your
-              certificate signed by MIT faculty to highlight the knowledge and
-              skills you've gained from this MITx course.
-              </p>
-            </div>
             <div className={certificateLinksIntStyles}>
               <div className="get-cert-button-container w-100">
                 <GetCertificateButton productId={enrollment.run.products[0].id} />
               </div>
-              <div className="finaid-link-container">
-                {financialAssistanceLink}
-              </div>
+            </div>
+            <div className="certificate-upgrade-message">
+              <strong>Upgrade today</strong> and, upon passing, receive your
+            certificate signed by MIT faculty to highlight the knowledge and
+            skills you've gained from this MITx course.{" "}
+              <b>
+              Upgrade expires:{" "}
+                {formatPrettyDateTimeAmPmTz(
+                  parseDateString(enrollment.run.upgrade_deadline)
+                )}
+              </b>
             </div>
           </div>
         ) : null
@@ -492,8 +482,8 @@ export class EnrolledItemCard extends React.Component<
           )}
 
           <div className="col-12 col-md course-card-text-details d-grid">
-            <div className="d-flex justify-content-between align-content-start flex-nowrap w-100">
-              <div className="d-flex flex-column">
+            <div className="d-flex justify-content-between flex-nowrap w-100">
+              <div className="d-flex flex-column flex-grow-1">
                 <div className="align-content-start d-flex enrollment-mode-container flex-wrap pb-1">
                   {enrollment.certificate ? (
                     <span className="badge badge-enrolled-passed mr-2">
@@ -509,7 +499,35 @@ export class EnrolledItemCard extends React.Component<
                     ) : null}
                 </div>
 
-                <h2>{title}</h2>
+                <h2>{enrollment.run.course.title}</h2>
+              </div>
+              <div className="d-flex flex-column goto-course-wrapper px-4">
+                {isLinkableCourseRun(enrollment.run, currentUser) ? (
+                  <a
+                    href={enrollment.run.courseware_url}
+                    onClick={ev =>
+                      redirectToCourseHomepage(
+                        enrollment.run.courseware_url,
+                        ev
+                      )
+                    }
+                    className="btn btn-primary btn-gradient-red-to-blue"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    Go to Course
+                  </a>
+                ) : (
+                  <a
+                    className="btn btn-primary btn-gradient-red-to-blue disabled"
+                    rel="noopener noreferrer"
+                  >
+                    Starts{" "}
+                    {formatPrettyMonthDate(
+                      parseDateString(enrollment.run.start_date)
+                    )}
+                  </a>
+                )}
               </div>
               <Dropdown
                 isOpen={menuVisibility}

frontend/public/src/components/EnrolledItemCard_test.js

@@ -15,15 +15,13 @@ import {
   makeLearnerRecordGrade
 } from "../factories/course"
 import { makeUser } from "../factories/user"
-import * as courseApi from "../lib/courseApi"
 
 describe("EnrolledItemCard", () => {
   let helper,
     renderedCard,
     userEnrollment,
     currentUser,
     enrollmentCardProps,
-    isFinancialAssistanceAvailableStub,
     toggleProgramDrawer,
     redirectToCourseHomepage
 
@@ -48,10 +46,6 @@ describe("EnrolledItemCard", () => {
         .returns(Promise),
       addUserNotification: helper.sandbox.stub().returns(Function)
     }
-    isFinancialAssistanceAvailableStub = helper.sandbox.stub(
-      courseApi,
-      "isFinancialAssistanceAvailable"
-    )
     toggleProgramDrawer = helper.sandbox.stub().returns(Function)
     redirectToCourseHomepage = helper.sandbox.stub().returns(Function)
 
@@ -251,25 +245,6 @@ describe("EnrolledItemCard", () => {
       assert.isTrue(verifiedUnenrollmodal.exists())
     })
   })
-  ;[[true], [false]].forEach(([approvedFlexiblePrice]) => {
-    it("renders the financial assistance link", async () => {
-      isFinancialAssistanceAvailableStub.returns(true)
-      userEnrollment = makeCourseRunEnrollmentWithProduct()
-      userEnrollment["enrollment_mode"] = "audit"
-      userEnrollment["approved_flexible_price_exists"] = approvedFlexiblePrice
-      enrollmentCardProps.enrollment = userEnrollment
-      const inner = await renderedCard()
-      const extraLinks = inner.find(".finaid-link")
-      if (approvedFlexiblePrice) {
-        const text = extraLinks.find("a").at(0)
-        assert.isFalse(text.exists())
-      } else {
-        const text = extraLinks.find("a").at(0).text()
-        assert.equal(text, "Financial assistance?")
-      }
-    })
-  })
-
   it("renders the program unenrollment verification modal", async () => {
     enrollmentCardProps.enrollment = makeProgramEnrollment()
 

frontend/public/src/components/Loader.js

@@ -24,7 +24,7 @@ const Loader = (props: LoaderProps) => {
       notNil(delayMs) ? delayMs : defaultLoaderDelayMs
     )
     return () => clearTimeout(timer)
-  }, [])
+  }, [isLoading, delayMs])
 
   if (!isLoading) {
     return children

frontend/public/src/lib/util.js

@@ -152,6 +152,9 @@ export const formatPrettyDate = (momentDate: Moment) =>
 export const formatPrettyShortDate = (momentDate: Moment) =>
   momentDate.format("MMM D, YYYY")
 
+export const formatPrettyMonthDate = (momentDate: Moment) =>
+  momentDate.format("MMMM D")
+
 export const formatPrettyDateUtc = (momentDate: Moment) =>
   momentDate.tz("UTC").format("MMMM D, YYYY")