From 2409e031c676c76d2bcdd864fd1e665f4ec1be27 Mon Sep 17 00:00:00 2001 From: Anna Gavrilman Date: Fri, 16 Aug 2024 09:39:01 -0400 Subject: [PATCH] Add Go To Course button (#2349) --- frontend/public/scss/dashboard.scss | 19 +++-- .../public/src/components/EnrolledItemCard.js | 80 ++++++++++++------- .../src/components/EnrolledItemCard_test.js | 25 ------ frontend/public/src/components/Loader.js | 2 +- frontend/public/src/lib/util.js | 3 + 5 files changed, 65 insertions(+), 64 deletions(-) diff --git a/frontend/public/scss/dashboard.scss b/frontend/public/scss/dashboard.scss index 9e8dffad1f..d670b3add5 100644 --- a/frontend/public/scss/dashboard.scss +++ b/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%; diff --git a/frontend/public/src/components/EnrolledItemCard.js b/frontend/public/src/components/EnrolledItemCard.js index cbc19c6d69..59b0b6caa9 100644 --- a/frontend/public/src/components/EnrolledItemCard.js +++ b/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) ? ( - - redirectToCourseHomepage(enrollment.run.courseware_url, ev) - } - target="_blank" - rel="noopener noreferrer" - > - {enrollment.run.course.title} - - ) : ( - 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 ? (
-
-

- Upgrade today and, upon passing, receive your - certificate signed by MIT faculty to highlight the knowledge and - skills you've gained from this MITx course. -

-
-
- {financialAssistanceLink} -
+
+
+ Upgrade today and, upon passing, receive your + certificate signed by MIT faculty to highlight the knowledge and + skills you've gained from this MITx course.{" "} + + Upgrade expires:{" "} + {formatPrettyDateTimeAmPmTz( + parseDateString(enrollment.run.upgrade_deadline) + )} +
) : null @@ -492,8 +482,8 @@ export class EnrolledItemCard extends React.Component< )}
-
-
+
+
{enrollment.certificate ? ( @@ -509,7 +499,35 @@ export class EnrolledItemCard extends React.Component< ) : null}
-

{title}

+

{enrollment.run.course.title}

+
+ { let helper, @@ -23,7 +22,6 @@ describe("EnrolledItemCard", () => { 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() diff --git a/frontend/public/src/components/Loader.js b/frontend/public/src/components/Loader.js index ffc690487f..0b965ebdd3 100644 --- a/frontend/public/src/components/Loader.js +++ b/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 diff --git a/frontend/public/src/lib/util.js b/frontend/public/src/lib/util.js index 334c5f3d31..f9ccd96a4e 100644 --- a/frontend/public/src/lib/util.js +++ b/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")