Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
])(
Expand All @@ -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()
Expand All @@ -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)
}
},
)
Expand Down Expand Up @@ -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)",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,8 @@ type CoursewareButtonProps = {
courseNoun: string
"data-testid"?: string
}
const getCoursewareText = ({

const getCoursewareTextAndIcon = ({
endDate,
enrollmentStatus,
courseNoun,
Expand All @@ -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: <RiArrowRightLine /> }
}

const CoursewareButton = styled(
({
coursewareId,
Expand All @@ -189,7 +191,7 @@ const CoursewareButton = styled(
courseNoun,
...others
}: CoursewareButtonProps) => {
const coursewareText = getCoursewareText({
const coursewareText = getCoursewareTextAndIcon({
endDate,
courseNoun,
enrollmentStatus,
Expand Down Expand Up @@ -222,20 +224,20 @@ const CoursewareButton = styled(
}
{...others}
>
{coursewareText}
{coursewareText.text}
</Button>
)
} else if (hasStarted && href /* Link to course */) {
return (
<ButtonLink
size="small"
variant="primary"
endIcon={<RiArrowRightLine />}
endIcon={coursewareText.endIcon}
href={href}
className={className}
{...others}
>
{coursewareText}
{coursewareText.text}
</ButtonLink>
)
}
Expand All @@ -249,11 +251,11 @@ const CoursewareButton = styled(
className={className}
{...others}
>
{coursewareText}
{coursewareText.text}
</Button>
)
},
)({ width: "142px" })
)({ width: "124px" })

const formatUpgradeTime = (daysFloat: number) => {
if (daysFloat < 0) return ""
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -88,6 +89,12 @@ const Title = styled.div(({ theme }) => ({
},
}))

const CardButton = styled(ButtonLink)({
width: "124px",
minWidth: "124px",
flexShrink: 0,
})

interface OrganizationContractsProps {
org: OrganizationPage
}
Expand All @@ -103,9 +110,9 @@ const OrganizationContracts: React.FC<OrganizationContractsProps> = ({
<TitleLink size="medium" color="black" href={href}>
{contract.name}
</TitleLink>
<ButtonLink size="small" href={href}>
<CardButton size="small" href={href} endIcon={<RiArrowRightLine />}>
Continue
</ButtonLink>
</CardButton>
</CardContent>
)
}) ?? null
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading