add card type and end date (#3504)

* Add card type text

* remove chevron from org cards

* add end date display and tests for it

* fix separator rendering on compact cards

* match by test id

* gate end date section on hasEnded

* Remove old start date countdown and consolidate with end date indicator into one "course date indicator"

* consolidate date popover and date indicator into one component with the indicator as a trigger and reorganize utility functions from cardshared

* fix mobile alignment of CTA

* fix cta alignment in unenrolled course cards

* add a threshold to formatCalendarDays that retuns a short date string from Intl if the day is more than 90 days away in either direction

* fix courseDateText null check

* switch date popover trigger to a button instead of link and add aria attributes

* add screen reader readable aria labels to all CTA's in the dashboard

* fix tests

Author: gumaerc

frontends/main/src/app-pages/DashboardPage/ContractContent.test.tsx

@@ -993,9 +993,9 @@ describe("ContractContent", () => {
     const { orgX, user, mitxOnlineUser } = setupOrgAndUser()
 
     // Create courses with specific, predictable dates for the contract runs
-    // Use a date that's guaranteed to be in the future relative to mocked time
-    const specificStartDate = "2024-12-01T00:00:00Z"
-    const specificEndDate = "2025-01-15T00:00:00Z"
+    // Use a date within 90 days of frozen time so formatCalendarDays returns "in X days"
+    const specificStartDate = "2024-02-15T00:00:00Z"
+    const specificEndDate = "2024-03-31T00:00:00Z"
 
     const baseCourses = factories.courses.courses({ count: 3 }).results
     const program = factories.programs.program({
@@ -1084,7 +1084,7 @@ describe("ContractContent", () => {
           is_enrollable: true,
           title: `CORRECT RUN - ${run.title}`,
           courseware_url: "https://correct-run.example.com",
-          start_date: "2024-12-01T00:00:00Z", // Future date relative to mocked time
+          start_date: "2024-02-15T00:00:00Z", // Future date relative to mocked time, within 90-day threshold
         }
       }),
     }))

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/CardShared.tsx

@@ -1,14 +1,10 @@
 import React from "react"
-import { Link, Stack, styled } from "ol-components"
+import { Link, Popover, Stack, styled, Typography } from "ol-components"
 import NextLink from "next/link"
 import { EnrollmentStatus } from "./helpers"
 import { ActionButton, Button, ButtonLink } from "@mitodl/smoot-design"
-import {
-  DashboardResource,
-  DashboardType,
-  getEnrollmentStatus,
-} from "./model/dashboardViewModel"
-import { calendarDaysUntil } from "ol-utilities"
+import { formatDate, getTimezone } from "ol-utilities"
+import { getCourseDateText, getRelativeDateContent } from "./courseDateUtils"
 
 const CardRoot = styled.div<{
   screenSize: "desktop" | "mobile"
@@ -66,6 +62,11 @@ const CardRoot = styled.div<{
   },
 ])
 
+const CardTypeText = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle4,
+  color: theme.custom.colors.silverGrayDark,
+}))
+
 const TitleHeading = styled.h3(({ theme }) => ({
   margin: 0,
   [theme.breakpoints.down("md")]: {
@@ -134,21 +135,6 @@ const MenuButton = styled(ActionButton)<{
     },
 ])
 
-const CountdownRoot = styled.div<{ layout?: "default" | "compact" }>(
-  ({ theme, layout = "default" }) => ({
-    width: layout === "compact" ? "88px" : "100%",
-    paddingRight: layout === "compact" ? "0px" : "32px",
-    display: "flex",
-    justifyContent: "center",
-    alignSelf: "end",
-    whiteSpace: layout === "compact" ? "nowrap" : "normal",
-    [theme.breakpoints.down("md")]: {
-      marginRight: "0px",
-      justifyContent: "flex-start",
-    },
-  }),
-)
-
 const COURSEWARE_BUTTON_WIDTH = "88px"
 
 // Thin vertical divider shown between the certificate/upgrade links and the
@@ -183,79 +169,157 @@ const CoursewareButtonLink = styled(ButtonLink)(({ theme, variant }) => ({
   }),
 }))
 
-/**
- * Rewrites a raw mitxonline certificate link (`/certificate/{uuid}/`) to MIT
- * Learn's own certificate route (`/certificate/{certificateType}/{uuid}/`).
- */
-const getCertificateLink = (
-  link: string | null | undefined,
-  certificateType: "course" | "program",
-): string | null => {
-  if (!link) return null
-  const pattern = /\/certificate\/([^/]+)\/?$/
-  return link.replace(pattern, `/certificate/${certificateType}/$1/`)
+const Separator = styled.span(({ theme }) => ({
+  display: "inline-block",
+  width: "1px",
+  height: "12px",
+  margin: "0 8px",
+  backgroundColor: theme.custom.colors.silverGrayLight,
+}))
+
+const DateText = styled(Typography)(({ theme }) => ({
+  ...theme.typography.subtitle3,
+  color: theme.custom.colors.silverGrayDark,
+}))
+
+const CourseDateText: React.FC<{
+  startDate?: string | null | undefined
+  endDate?: string | null | undefined
+  className?: string
+}> = ({ startDate, endDate, className }) => {
+  const text = getCourseDateText(startDate, endDate)
+  if (!text) return null
+  return <DateText className={className}>{text}</DateText>
 }
 
-const getDashboardEnrollmentStatus = (
-  resource: DashboardResource,
-): EnrollmentStatus => {
-  const hasValidCertificate =
-    resource.type !== DashboardType.Course && !!resource.data.certificate?.uuid
+const DatePopoverContent = styled.div({
+  maxWidth: "240px",
+  display: "flex",
+  padding: "8px",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: "28px",
+  alignSelf: "stretch",
+})
 
-  if (resource.type === DashboardType.Course) {
-    return EnrollmentStatus.NotEnrolled
-  }
+const DatePopoverTrigger = styled("button")(({ theme }) => ({
+  ...theme.typography.body2,
+  color: theme.custom.colors.silverGrayDark,
+  background: "none",
+  border: "none",
+  padding: 0,
+  cursor: "pointer",
+  "&:hover": {
+    color: theme.custom.colors.silverGrayDark,
+    textDecoration: "underline",
+  },
+}))
 
-  if (resource.type === DashboardType.CourseRunEnrollment) {
-    return hasValidCertificate
-      ? EnrollmentStatus.Completed
-      : getEnrollmentStatus(resource.data)
-  }
+const DatePopoverHeading = styled(Typography)(({ theme }) => ({
+  color: theme.custom.colors.black,
+}))
 
-  return hasValidCertificate
-    ? EnrollmentStatus.Completed
-    : EnrollmentStatus.Enrolled
-}
+const DatePopoverBody = styled(Typography)(({ theme }) => ({
+  color: theme.custom.colors.black,
+}))
 
-const CourseStartCountdown: React.FC<{
-  startDate: string
-  className?: string
-  layout?: "default" | "compact"
-}> = ({ startDate, className, layout = "default" }) => {
-  const calendarDays = calendarDaysUntil(startDate)
+const DatePopoverDismissButton = styled(Button)({
+  alignSelf: "flex-end",
+})
+
+const CourseDateSummary: React.FC<{
+  startDate?: string | null | undefined
+  endDate?: string | null | undefined
+}> = ({ startDate, endDate }) => {
+  const popoverId = React.useId()
+  const [popoverAnchorEl, setPopoverAnchorEl] =
+    React.useState<HTMLButtonElement | null>(null)
+
+  const triggerText = getCourseDateText(startDate, endDate)
+  const startDateFormatted = startDate
+    ? `${formatDate(startDate, "MMMM D, YYYY h:mm A")} ${getTimezone(startDate)}`
+    : null
+  const endDateFormatted = endDate
+    ? `${formatDate(endDate, "MMMM D, YYYY h:mm A")} ${getTimezone(endDate)}`
+    : null
+  const datePopoverContent = getRelativeDateContent(
+    startDate,
+    endDate,
+    startDateFormatted,
+    endDateFormatted,
+  )
+
+  if (!triggerText || !datePopoverContent) return null
 
-  let value
-  if (calendarDays === null || calendarDays < 0) return null
-  if (calendarDays === 0) {
-    value = "Starts Today"
-  } else if (calendarDays === 1) {
-    value = "Starts Tomorrow"
-  } else {
-    value = `Starts in ${calendarDays} days`
-  }
   return (
-    <CountdownRoot layout={layout}>
-      <Link color="black" size="small" className={className}>
-        {value}
-      </Link>
-    </CountdownRoot>
+    <>
+      <Popover
+        anchorEl={popoverAnchorEl}
+        open={!!popoverAnchorEl}
+        onClose={() => setPopoverAnchorEl(null)}
+      >
+        <DatePopoverContent
+          id={popoverId}
+          role="dialog"
+          aria-label="Important Dates"
+        >
+          <Stack direction="column" gap="4px">
+            <DatePopoverHeading variant="subtitle3">
+              Important Dates:
+            </DatePopoverHeading>
+            <DatePopoverBody variant="body3">
+              This course{" "}
+              <Typography variant="subtitle3" component="span">
+                {datePopoverContent.startVerb}
+              </Typography>{" "}
+              {datePopoverContent.startSuffix}
+            </DatePopoverBody>
+          </Stack>
+          {datePopoverContent.endVerb && datePopoverContent.endSuffix && (
+            <DatePopoverBody variant="body3">
+              This course{" "}
+              <Typography variant="subtitle3" component="span">
+                {datePopoverContent.endVerb}
+              </Typography>{" "}
+              {datePopoverContent.endSuffix}
+            </DatePopoverBody>
+          )}
+          <DatePopoverDismissButton
+            variant="primary"
+            size="small"
+            onClick={() => setPopoverAnchorEl(null)}
+          >
+            Got it!
+          </DatePopoverDismissButton>
+        </DatePopoverContent>
+      </Popover>
+      <DatePopoverTrigger
+        aria-expanded={!!popoverAnchorEl}
+        aria-haspopup="dialog"
+        aria-controls={popoverAnchorEl ? popoverId : undefined}
+        onClick={(event) => setPopoverAnchorEl(event.currentTarget)}
+      >
+        {triggerText}
+      </DatePopoverTrigger>
+    </>
   )
 }
 
 export {
   CardRoot,
+  CardTypeText,
   TitleHeading,
   TitleLink,
   TitleText,
   SubtitleLinkRoot,
   SubtitleLink,
   MenuButton,
-  CountdownRoot,
-  CourseStartCountdown,
   HorizontalSeparator,
   CoursewareActionColumn,
   CoursewareButton,
   CoursewareButtonLink,
-  getCertificateLink,
-  getDashboardEnrollmentStatus,
+  Separator,
+  DateText,
+  CourseDateText,
+  CourseDateSummary,
 }

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrolledCourseCard.test.tsx

@@ -100,7 +100,9 @@ describe.each([
       run: { ...futureRunDates, courseware_url: coursewareUrl },
     })
     renderWithProviders(<EnrolledCourseCard enrollment={enrollment} />)
-    const btn = await within(getCard()).findByRole("link", { name: "Continue" })
+    const btn = await within(getCard()).findByRole("link", {
+      name: /^Continue course:/,
+    })
     expect(btn).toHaveAttribute("href", coursewareUrl)
   })
 
@@ -194,6 +196,54 @@ describe.each([
     expect(getCard()).toHaveTextContent(/starts in 5 days/i)
   })
 
+  // ---------------------------------------------------------------------------
+  // End date display
+  // ---------------------------------------------------------------------------
+
+  test.each([
+    {
+      endDate: moment().add(2, "days").toISOString(),
+      expectedText: /ends in 2 days/i,
+      case: "future (plural)",
+    },
+    {
+      endDate: moment().add(1, "day").toISOString(),
+      expectedText: /ends tomorrow/i,
+      case: "future (singular)",
+    },
+    {
+      endDate: moment().subtract(2, "days").toISOString(),
+      expectedText: /ended 2 days ago/i,
+      case: "past (plural)",
+    },
+    {
+      endDate: moment().subtract(1, "day").toISOString(),
+      expectedText: /ended yesterday/i,
+      case: "past (singular)",
+    },
+  ])("Shows end date text ($case)", ({ endDate, expectedText }) => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment({
+      run: { ...currentRunDates, end_date: endDate },
+    })
+    renderWithProviders(<EnrolledCourseCard enrollment={enrollment} />)
+    expect(within(getCard()).getByText(expectedText)).toBeInTheDocument()
+  })
+
+  test("Does not show end date text when run has no end date", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment({
+      run: { ...currentRunDates, end_date: null },
+    })
+    renderWithProviders(<EnrolledCourseCard enrollment={enrollment} />)
+    expect(
+      within(getCard()).queryByText(/ends in \d+ day/i),
+    ).not.toBeInTheDocument()
+    expect(
+      within(getCard()).queryByText(/ended \d+ day/i),
+    ).not.toBeInTheDocument()
+  })
+
   // ---------------------------------------------------------------------------
   // Enrollment status indicator
   // ---------------------------------------------------------------------------
@@ -338,6 +388,26 @@ describe.each([
     },
   )
 
+  test("Does not show upgrade banner when upgrade deadline has passed", () => {
+    setupUserApis()
+    const enrollment = mitxonline.factories.enrollment.courseEnrollment({
+      enrollment_mode: EnrollmentMode.Audit,
+      b2b_contract_id: null,
+      run: {
+        ...currentRunDates,
+        is_upgradable: true,
+        upgrade_deadline: moment().subtract(1, "day").toISOString(),
+        upgrade_product_id: faker.number.int(),
+        upgrade_product_price: faker.commerce.price(),
+        upgrade_product_is_active: true,
+      },
+    })
+    renderWithProviders(<EnrolledCourseCard enrollment={enrollment} />)
+    expect(
+      within(getCard()).queryByTestId("upgrade-root"),
+    ).not.toBeInTheDocument()
+  })
+
   test("Does not show upgrade banner when upgrade_product_is_active is missing", () => {
     setupUserApis()
     const enrollment = mitxonline.factories.enrollment.courseEnrollment({