diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx index a5aaf796c7..ec993bd752 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx @@ -179,21 +179,21 @@ describe.each([ course: pastDashboardCourse({ enrollment: { status: EnrollmentStatus.Enrolled }, }), - expected: { labelPrefix: "View" }, + expected: { label: "View", usesCourseNoun: true }, case: "past", }, { course: currentDashboardCourse({ enrollment: { status: EnrollmentStatus.Enrolled }, }), - expected: { labelPrefix: "Continue" }, + expected: { label: "Continue", usesCourseNoun: false }, case: "current", }, { course: futureDashboardCourse({ enrollment: { status: EnrollmentStatus.Enrolled }, }), - expected: { labelPrefix: "Continue" }, + expected: { label: "Continue", usesCourseNoun: false }, label: "future", }, ])( @@ -211,10 +211,10 @@ describe.each([ !course.enrollment ) { expect(coursewareCTA).toHaveTextContent("Start Course") + } else if (expected.usesCourseNoun) { + expect(coursewareCTA).toHaveTextContent(`${expected.label} Course`) } else { - expect(coursewareCTA).toHaveTextContent( - `${expected.labelPrefix} Course`, - ) + expect(coursewareCTA).toHaveTextContent(expected.label) } const courseNoun = faker.word.noun() @@ -231,10 +231,13 @@ describe.each([ !course.enrollment ) { expect(coursewareCTA).toHaveTextContent(`Start ${courseNoun}`) - } else { + } else if (expected.usesCourseNoun) { expect(coursewareCTA).toHaveTextContent( - `${expected.labelPrefix} ${courseNoun}`, + `${expected.label} ${courseNoun}`, ) + } else { + // "Continue" doesn't use courseNoun + expect(coursewareCTA).toHaveTextContent(expected.label) } }, ) @@ -522,7 +525,7 @@ describe.each([ test.each([ { status: EnrollmentStatus.Completed, expectedText: "View Course" }, - { status: EnrollmentStatus.Enrolled, expectedText: "Continue Course" }, + { status: EnrollmentStatus.Enrolled, expectedText: "Continue" }, { status: EnrollmentStatus.NotEnrolled, expectedText: "Start Course" }, ])( "CoursewareButton shows correct text based on enrollment status ($status)", diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx index c3e3d0cd59..1d0787cb60 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx @@ -158,7 +158,8 @@ type CoursewareButtonProps = { courseNoun: string "data-testid"?: string } -const getCoursewareText = ({ + +const getCoursewareTextAndIcon = ({ endDate, enrollmentStatus, courseNoun, @@ -168,16 +169,17 @@ const getCoursewareText = ({ courseNoun: string }) => { if (!enrollmentStatus || enrollmentStatus === EnrollmentStatus.NotEnrolled) { - return `Start ${courseNoun}` + return { text: `Start ${courseNoun}`, endIcon: null } } if ( (endDate && isInPast(endDate)) || enrollmentStatus === EnrollmentStatus.Completed ) { - return `View ${courseNoun}` + return { text: `View ${courseNoun}`, endIcon: null } } - return `Continue ${courseNoun}` + return { text: "Continue", endIcon: } } + const CoursewareButton = styled( ({ coursewareId, @@ -189,7 +191,7 @@ const CoursewareButton = styled( courseNoun, ...others }: CoursewareButtonProps) => { - const coursewareText = getCoursewareText({ + const coursewareText = getCoursewareTextAndIcon({ endDate, courseNoun, enrollmentStatus, @@ -222,7 +224,7 @@ const CoursewareButton = styled( } {...others} > - {coursewareText} + {coursewareText.text} ) } else if (hasStarted && href /* Link to course */) { @@ -230,12 +232,12 @@ const CoursewareButton = styled( } + endIcon={coursewareText.endIcon} href={href} className={className} {...others} > - {coursewareText} + {coursewareText.text} ) } @@ -249,11 +251,11 @@ const CoursewareButton = styled( className={className} {...others} > - {coursewareText} + {coursewareText.text} ) }, -)({ width: "142px" }) +)({ width: "124px" }) const formatUpgradeTime = (daysFloat: number) => { if (daysFloat < 0) return "" diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx index 08a4c20de1..98044121b6 100644 --- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx +++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/OrganizationCards.tsx @@ -8,6 +8,7 @@ import { mitxUserQueries } from "api/mitxonline-hooks/user" import { ButtonLink } from "@mitodl/smoot-design" import { organizationView } from "@/common/urls" import { OrganizationPage } from "@mitodl/mitxonline-api-axios/v2" +import { RiArrowRightLine } from "@remixicon/react" const Wrapper = styled.div(({ theme }) => ({ display: "flex", @@ -88,6 +89,12 @@ const Title = styled.div(({ theme }) => ({ }, })) +const CardButton = styled(ButtonLink)({ + width: "124px", + minWidth: "124px", + flexShrink: 0, +}) + interface OrganizationContractsProps { org: OrganizationPage } @@ -103,9 +110,9 @@ const OrganizationContracts: React.FC = ({ {contract.name} - + }> Continue - + ) }) ?? null diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx index b5c28eb72f..bf55189e88 100644 --- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx +++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx @@ -530,9 +530,8 @@ describe("OrganizationContent", () => { // Check that the card displays information from the correct course run const coursewareButton = within(card).getByTestId("courseware-button") - // The courseware button shows different text based on course type and enrollment status - // For enrolled users in started courses, it shows "Continue Course" or "Continue Module" - expect(coursewareButton).toHaveTextContent(/Continue (Course|Module)/i) + // The courseware button shows "Continue" for enrolled users in started courses + expect(coursewareButton).toHaveTextContent("Continue") // Verify the courseware button has the correct href from the contract run // Only check href if the course has started and user is enrolled