more dashboard CTA adjustments (#2701)

* adjust CTA buttons to new width of 124px, set new button text and end icon logic

* update tests to reflect new logic

* fix one more test

Author: gumaerc

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)",

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: <RiArrowRightLine /> }
 }
+
 const CoursewareButton = styled(
   ({
     coursewareId,
@@ -189,7 +191,7 @@ const CoursewareButton = styled(
     courseNoun,
     ...others
   }: CoursewareButtonProps) => {
-    const coursewareText = getCoursewareText({
+    const coursewareText = getCoursewareTextAndIcon({
       endDate,
       courseNoun,
       enrollmentStatus,
@@ -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>
       )
     }
@@ -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 ""

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<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

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