From 6f98176bf0117bb1b63d3adcba32ae682871f108 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 19 Nov 2025 16:57:50 -0500
Subject: [PATCH 01/26] basic skeleton of loading program enrollments from v2
 endpoint

---
 .../mitxonline/hooks/enrollment/queries.ts    |   6 +-
 .../CoursewareDisplay/DashboardCard.tsx       | 340 ++++++++++--------
 .../CoursewareDisplay/EnrollmentDisplay.tsx   |  84 +++--
 .../CoursewareDisplay/transform.ts            |  19 +
 4 files changed, 269 insertions(+), 180 deletions(-)

diff --git a/frontends/api/src/mitxonline/hooks/enrollment/queries.ts b/frontends/api/src/mitxonline/hooks/enrollment/queries.ts
index 67f0a9855b..2110e1206e 100644
--- a/frontends/api/src/mitxonline/hooks/enrollment/queries.ts
+++ b/frontends/api/src/mitxonline/hooks/enrollment/queries.ts
@@ -1,7 +1,7 @@
 import { queryOptions } from "@tanstack/react-query"
 import type {
   CourseRunEnrollmentRequestV2,
-  UserProgramEnrollmentDetail,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 
 import { courseRunEnrollmentsApi, programEnrollmentsApi } from "../../clients"
@@ -35,9 +35,9 @@ const enrollmentQueries = {
   programEnrollmentsList: (opts?: RawAxiosRequestConfig) =>
     queryOptions({
       queryKey: enrollmentKeys.programEnrollmentsList(opts),
-      queryFn: async (): Promise<UserProgramEnrollmentDetail[]> => {
+      queryFn: async (): Promise<V2UserProgramEnrollmentDetail[]> => {
         return programEnrollmentsApi
-          .programEnrollmentsList(opts)
+          .v2ProgramEnrollmentsList(opts)
           .then((res) => res.data)
       },
     }),
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 1d0787cb60..ce6a971d95 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -9,10 +9,16 @@ import {
   LoadingSpinner,
 } from "ol-components"
 import NextLink from "next/link"
-import { EnrollmentStatus, EnrollmentMode } from "./types"
+import {
+  EnrollmentStatus,
+  EnrollmentMode,
+  DashboardResourceType,
+} from "./types"
 import type {
   DashboardResource,
   DashboardCourse,
+  DashboardProgram,
+  DashboardProgramCollection,
   DashboardCourseEnrollment,
 } from "./types"
 import { ActionButton, Button, ButtonLink } from "@mitodl/smoot-design"
@@ -35,6 +41,25 @@ import { useCreateEnrollment } from "api/mitxonline-hooks/enrollment"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
 
+// Type guard functions
+const isDashboardCourse = (
+  resource: DashboardResource,
+): resource is DashboardCourse => {
+  return resource.type === DashboardResourceType.Course
+}
+
+const isDashboardProgram = (
+  resource: DashboardResource,
+): resource is DashboardProgram => {
+  return resource.type === DashboardResourceType.Program
+}
+
+const isDashboardProgramCollection = (
+  resource: DashboardResource,
+): resource is DashboardProgramCollection => {
+  return resource.type === DashboardResourceType.ProgramCollection
+}
+
 const CardRoot = styled.div<{
   screenSize: "desktop" | "mobile"
 }>(({ theme, screenSize }) => [
@@ -385,163 +410,182 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   buttonHref,
   titleAction,
 }) => {
-  const course = dashboardResource as DashboardCourse
-  const { title, marketingUrl, enrollment, run } = course
   const oneClickEnroll = useOneClickEnroll()
 
-  const coursewareUrl = run.coursewareUrl
-  const titleHref =
-    titleAction === "marketing" ? marketingUrl : (coursewareUrl ?? marketingUrl)
-  const hasEnrolled =
-    enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
-  const titleClick: React.MouseEventHandler | undefined =
-    titleAction === "courseware" && coursewareUrl && !hasEnrolled
-      ? (e) => {
-          e.preventDefault()
-          if (!course.coursewareId) return
-          oneClickEnroll.mutate({
-            href: coursewareUrl,
-            coursewareId: course.coursewareId,
-          })
-        }
-      : undefined
+  // Type-specific logic
+  if (isDashboardCourse(dashboardResource)) {
+    const course = dashboardResource
+    const { title, marketingUrl, enrollment, run } = course
 
-  const titleSection = isLoading ? (
-    <>
-      <Skeleton variant="text" width="95%" height={16} />
-      <Skeleton variant="text" width={120} height={16} />
-      <Skeleton variant="text" width={120} height={16} />
-    </>
-  ) : (
-    <>
-      <TitleLink
-        size="medium"
-        color="black"
-        href={titleHref}
-        onClick={titleClick}
-      >
-        {title}
-      </TitleLink>
-      {enrollment?.status === EnrollmentStatus.Completed &&
-      run.certificate?.link ? (
-        <SubtitleLink href={run.certificate.link}>
-          {<RiAwardLine size="16px" />}
-          View Certificate
-        </SubtitleLink>
-      ) : null}
-      {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? (
-        <UpgradeBanner
-          data-testid="upgrade-root"
-          canUpgrade={run.canUpgrade ?? false}
-          certificateUpgradeDeadline={run.certificateUpgradeDeadline}
-          certificateUpgradePrice={run.certificateUpgradePrice}
+    const coursewareUrl = run.coursewareUrl
+    const titleHref =
+      titleAction === "marketing"
+        ? marketingUrl
+        : (coursewareUrl ?? marketingUrl)
+    const hasEnrolled =
+      enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
+    const titleClick: React.MouseEventHandler | undefined =
+      titleAction === "courseware" && coursewareUrl && !hasEnrolled
+        ? (e) => {
+            e.preventDefault()
+            if (!course.coursewareId) return
+            oneClickEnroll.mutate({
+              href: coursewareUrl,
+              coursewareId: course.coursewareId,
+            })
+          }
+        : undefined
+
+    const titleSection = isLoading ? (
+      <>
+        <Skeleton variant="text" width="95%" height={16} />
+        <Skeleton variant="text" width={120} height={16} />
+        <Skeleton variant="text" width={120} height={16} />
+      </>
+    ) : (
+      <>
+        <TitleLink
+          size="medium"
+          color="black"
+          href={titleHref}
+          onClick={titleClick}
+        >
+          {title}
+        </TitleLink>
+        {enrollment?.status === EnrollmentStatus.Completed &&
+        run.certificate?.link ? (
+          <SubtitleLink href={run.certificate.link}>
+            {<RiAwardLine size="16px" />}
+            View Certificate
+          </SubtitleLink>
+        ) : null}
+        {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? (
+          <UpgradeBanner
+            data-testid="upgrade-root"
+            canUpgrade={run.canUpgrade ?? false}
+            certificateUpgradeDeadline={run.certificateUpgradeDeadline}
+            certificateUpgradePrice={run.certificateUpgradePrice}
+          />
+        ) : null}
+      </>
+    )
+    const buttonSection = isLoading ? (
+      <Skeleton variant="rectangular" width={120} height={32} />
+    ) : (
+      <>
+        <EnrollmentStatusIndicator
+          status={enrollment?.status}
+          showNotComplete={showNotComplete}
         />
-      ) : null}
-    </>
-  )
-  const buttonSection = isLoading ? (
-    <Skeleton variant="rectangular" width={120} height={32} />
-  ) : (
-    <>
-      <EnrollmentStatusIndicator
-        status={enrollment?.status}
-        showNotComplete={showNotComplete}
-      />
-      <CoursewareButton
-        data-testid="courseware-button"
-        coursewareId={course.coursewareId}
-        startDate={run.startDate}
-        enrollmentStatus={enrollment?.status}
-        href={buttonHref ? buttonHref : run.coursewareUrl}
-        endDate={run.endDate}
-        courseNoun={courseNoun}
+        <CoursewareButton
+          data-testid="courseware-button"
+          coursewareId={course.coursewareId}
+          startDate={run.startDate}
+          enrollmentStatus={enrollment?.status}
+          href={buttonHref ? buttonHref : run.coursewareUrl}
+          endDate={run.endDate}
+          courseNoun={courseNoun}
+        />
+      </>
+    )
+    const startDateSection = isLoading ? (
+      <Skeleton variant="text" width={100} height={24} />
+    ) : run.startDate ? (
+      <CourseStartCountdown startDate={run.startDate} />
+    ) : null
+    const menuItems = contextMenuItems.concat(
+      enrollment?.id ? getDefaultContextMenuItems(title, enrollment) : [],
+    )
+    const contextMenu = isLoading ? (
+      <Skeleton variant="rectangular" width={12} height={24} />
+    ) : (
+      <SimpleMenu
+        items={menuItems}
+        trigger={
+          <MenuButton
+            size="small"
+            variant="text"
+            aria-label="More options"
+            status={enrollment?.status}
+            hidden={menuItems.length === 0}
+          >
+            <RiMore2Line />
+          </MenuButton>
+        }
       />
-    </>
-  )
-  const startDateSection = isLoading ? (
-    <Skeleton variant="text" width={100} height={24} />
-  ) : run.startDate ? (
-    <CourseStartCountdown startDate={run.startDate} />
-  ) : null
-  const menuItems = contextMenuItems.concat(
-    enrollment?.id ? getDefaultContextMenuItems(title, enrollment) : [],
-  )
-  const contextMenu = isLoading ? (
-    <Skeleton variant="rectangular" width={12} height={24} />
-  ) : (
-    <SimpleMenu
-      items={menuItems}
-      trigger={
-        <MenuButton
-          size="small"
-          variant="text"
-          aria-label="More options"
-          status={enrollment?.status}
-          hidden={menuItems.length === 0}
-        >
-          <RiMore2Line />
-        </MenuButton>
-      }
-    />
-  )
-  const desktopLayout = (
-    <CardRoot
-      screenSize="desktop"
-      data-testid="enrollment-card-desktop"
-      as={Component}
-      className={className}
-    >
-      <Stack justifyContent="start" alignItems="stretch" gap="8px" flex={1}>
-        {titleSection}
-      </Stack>
-      <Stack gap="8px">
-        <Stack direction="row" gap="8px" alignItems="center">
-          {buttonSection}
-          {contextMenu}
-        </Stack>
-        {startDateSection}
-      </Stack>
-    </CardRoot>
-  )
-
-  const mobileLayout = (
-    <CardRoot
-      screenSize="mobile"
-      data-testid="enrollment-card-mobile"
-      as={Component}
-      className={className}
-    >
-      <Stack
-        direction="row"
-        justifyContent="space-between"
-        alignItems="stretch"
-        flex={1}
-        width="100%"
+    )
+    const desktopLayout = (
+      <CardRoot
+        screenSize="desktop"
+        data-testid="enrollment-card-desktop"
+        as={Component}
+        className={className}
       >
-        <Stack direction="column" gap="8px" flex={1}>
+        <Stack justifyContent="start" alignItems="stretch" gap="8px" flex={1}>
           {titleSection}
         </Stack>
-        {contextMenu}
-      </Stack>
-      <Stack
-        direction="row"
-        alignItems="center"
-        justifyContent="end"
-        width="100%"
+        <Stack gap="8px">
+          <Stack direction="row" gap="8px" alignItems="center">
+            {buttonSection}
+            {contextMenu}
+          </Stack>
+          {startDateSection}
+        </Stack>
+      </CardRoot>
+    )
+
+    const mobileLayout = (
+      <CardRoot
+        screenSize="mobile"
+        data-testid="enrollment-card-mobile"
+        as={Component}
+        className={className}
       >
-        {startDateSection}
-        <Stack direction="row" gap="8px" alignItems="center">
-          {buttonSection}
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          alignItems="stretch"
+          flex={1}
+          width="100%"
+        >
+          <Stack direction="column" gap="8px" flex={1}>
+            {titleSection}
+          </Stack>
+          {contextMenu}
         </Stack>
-      </Stack>
-    </CardRoot>
-  )
-  return (
-    <>
-      {desktopLayout}
-      {mobileLayout}
-    </>
-  )
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="end"
+          width="100%"
+        >
+          {startDateSection}
+          <Stack direction="row" gap="8px" alignItems="center">
+            {buttonSection}
+          </Stack>
+        </Stack>
+      </CardRoot>
+    )
+    return (
+      <>
+        {desktopLayout}
+        {mobileLayout}
+      </>
+    )
+  } else if (isDashboardProgram(dashboardResource)) {
+    const program = dashboardResource
+    // TODO: Implement program display logic
+    // This will show either:
+    // 1. First course from the program (with course title and courseware CTA)
+    // 2. Program title with a JavaScript handler CTA
+    return <div>Program display not yet implemented: {program.title}</div>
+  } else if (isDashboardProgramCollection(dashboardResource)) {
+    // TODO: Implement program collection display logic
+    return <div>Program collection display not yet implemented</div>
+  }
+
+  // Fallback for unknown types
+  return null
 }
 
 export {
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 5b59615eab..67b7619add 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -11,9 +11,12 @@ import {
   theme,
 } from "ol-components"
 import { useQuery } from "@tanstack/react-query"
-import { userEnrollmentsToDashboardCourses } from "./transform"
+import {
+  programEnrollmentsToPrograms,
+  userEnrollmentsToDashboardCourses,
+} from "./transform"
 import { DashboardCard } from "./DashboardCard"
-import { DashboardCourse, EnrollmentStatus } from "./types"
+import { DashboardCourse, DashboardProgram, EnrollmentStatus } from "./types"
 import type { AxiosError } from "axios"
 
 const Wrapper = styled.div(({ theme }) => ({
@@ -120,14 +123,16 @@ const sortEnrollments = (resources: DashboardCourse[]) => {
 }
 
 interface EnrollmentExpandCollapseProps {
-  shownEnrollments: DashboardCourse[]
-  hiddenEnrollments: DashboardCourse[]
+  shownCourseRunEnrollments: DashboardCourse[]
+  hiddenCourseRunEnrollments: DashboardCourse[]
+  programEnrollments?: DashboardProgram[]
   isLoading?: boolean
 }
 
 const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
-  shownEnrollments,
-  hiddenEnrollments,
+  shownCourseRunEnrollments,
+  hiddenCourseRunEnrollments,
+  programEnrollments,
   isLoading,
 }) => {
   const [shown, setShown] = React.useState(false)
@@ -140,7 +145,7 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   return (
     <>
       <EnrollmentsList itemSpacing={"16px"}>
-        {shownEnrollments.map((course) => (
+        {shownCourseRunEnrollments.map((course) => (
           <DashboardCardStyled
             titleAction="marketing"
             key={course.key}
@@ -150,12 +155,22 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
             isLoading={isLoading}
           />
         ))}
+        {programEnrollments?.map((program) => (
+          <DashboardCardStyled
+            titleAction="marketing"
+            key={program.key}
+            Component="li"
+            dashboardResource={program}
+            showNotComplete={false}
+            isLoading={isLoading}
+          />
+        ))}
       </EnrollmentsList>
-      {hiddenEnrollments.length === 0 ? null : (
+      {hiddenCourseRunEnrollments.length === 0 ? null : (
         <>
           <Collapse orientation="vertical" in={shown}>
             <HiddenEnrollmentsList itemSpacing={"16px"}>
-              {hiddenEnrollments.map((course) => (
+              {hiddenCourseRunEnrollments.map((course) => (
                 <DashboardCardStyled
                   titleAction="marketing"
                   key={course.key}
@@ -179,23 +194,33 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
 }
 
 const EnrollmentDisplay = () => {
-  const { data: enrolledCourses, isLoading } = useQuery({
-    ...enrollmentQueries.courseRunEnrollmentsList(),
-    select: userEnrollmentsToDashboardCourses,
-    throwOnError: (error) => {
-      const err = error as AxiosError<{ detail?: string }>
-      const status = err?.response?.status
-      if (
-        status === 403 &&
-        err.response?.data?.detail ===
-          "Authentication credentials were not provided."
-      ) {
-        // For now, we don't want to throw an error if the user is not authenticated.
-        return false
-      }
-      return true
-    },
-  })
+  const onError = (error: Error) => {
+    const err = error as AxiosError<{ detail?: string }>
+    const status = err?.response?.status
+    if (
+      status === 403 &&
+      err.response?.data?.detail ===
+        "Authentication credentials were not provided."
+    ) {
+      // For now, we don't want to throw an error if the user is not authenticated.
+      return false
+    }
+    return true
+  }
+
+  const { data: enrolledCourses, isLoading: courseEnrollmentsLoading } =
+    useQuery({
+      ...enrollmentQueries.courseRunEnrollmentsList(),
+      select: userEnrollmentsToDashboardCourses,
+      throwOnError: onError,
+    })
+
+  const { data: programEnrollments, isLoading: programEnrollmentsLoading } =
+    useQuery({
+      ...enrollmentQueries.programEnrollmentsList(),
+      select: programEnrollmentsToPrograms,
+      throwOnError: onError,
+    })
 
   const { completed, expired, started, notStarted } = sortEnrollments(
     enrolledCourses || [],
@@ -208,9 +233,10 @@ const EnrollmentDisplay = () => {
         My Learning
       </Title>
       <EnrollmentExpandCollapse
-        shownEnrollments={shownEnrollments}
-        hiddenEnrollments={expired}
-        isLoading={isLoading}
+        shownCourseRunEnrollments={shownEnrollments}
+        hiddenCourseRunEnrollments={expired}
+        programEnrollments={programEnrollments || []}
+        isLoading={courseEnrollmentsLoading || programEnrollmentsLoading}
       />
     </Wrapper>
   ) : null
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index fa141ccf1a..3d805666ec 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -10,9 +10,11 @@ import {
   CourseWithCourseRunsSerializerV2,
   V2Program,
   V2ProgramCollection,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 
 import { DashboardResourceType, EnrollmentStatus } from "./types"
+
 import type {
   DashboardContract,
   DashboardCourse,
@@ -245,6 +247,22 @@ const organizationCoursesWithContracts = (raw: {
   return transformedCourses
 }
 
+const programEnrollmentsToPrograms = (
+  data: V2UserProgramEnrollmentDetail[],
+): DashboardProgram[] => {
+  // Filter out program enrollments where any course enrollment is tied to a B2B contract
+  const nonB2BProgramEnrollments = data.filter((programEnrollment) => {
+    // Only include the program if NONE of its enrollments have a B2B contract
+    return !programEnrollment.enrollments.some(
+      (enrollment) => enrollment.b2b_contract_id !== null,
+    )
+  })
+
+  return nonB2BProgramEnrollments.map((programEnrollment) => {
+    return mitxonlineProgram(programEnrollment.program)
+  })
+}
+
 const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
   return {
     id: raw.id,
@@ -297,6 +315,7 @@ export {
   enrollmentsToOrgDashboardEnrollments,
   organizationCoursesWithContracts,
   createOrgUnenrolledCourse,
+  programEnrollmentsToPrograms,
   mitxonlineProgram,
   mitxonlineProgramCollection,
   sortDashboardCourses,

From 27c9472e4dcb7aec70c668019b8a323f0a3e5219 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 19 Nov 2025 18:08:13 -0500
Subject: [PATCH 02/26] Set up the basics for having a DashboardCard that
 supports programs with a configurable click action

---
 .../CoursewareDisplay/DashboardCard.tsx       | 270 ++++++++++--------
 1 file changed, 155 insertions(+), 115 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index ce6a971d95..0d00605d65 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -98,6 +98,17 @@ const TitleLink = styled(Link)(({ theme }) => ({
   },
 }))
 
+const TitleText = styled.div<{ clickable?: boolean }>(
+  ({ theme, clickable }) => ({
+    ...theme.typography.subtitle1,
+    color: theme.custom.colors.black,
+    cursor: clickable ? "pointer" : "default",
+    [theme.breakpoints.down("md")]: {
+      maxWidth: "calc(100% - 16px)",
+    },
+  }),
+)
+
 const MenuButton = styled(ActionButton)<{
   status?: EnrollmentStatus
 }>(({ theme, status }) => [
@@ -282,6 +293,8 @@ const CoursewareButton = styled(
   },
 )({ width: "124px" })
 
+const ProgramButton = styled(Button)({ width: "124px" })
+
 const formatUpgradeTime = (daysFloat: number) => {
   if (daysFloat < 0) return ""
   const days = Math.floor(daysFloat)
@@ -396,6 +409,7 @@ type DashboardCardProps = {
   contextMenuItems?: SimpleMenuItem[]
   isLoading?: boolean
   buttonHref?: string | null
+  onCtaClick?: (resource: DashboardResource) => void
 }
 
 const DashboardCard: React.FC<DashboardCardProps> = ({
@@ -409,41 +423,64 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   isLoading = false,
   buttonHref,
   titleAction,
+  onCtaClick,
 }) => {
   const oneClickEnroll = useOneClickEnroll()
 
-  // Type-specific logic
-  if (isDashboardCourse(dashboardResource)) {
-    const course = dashboardResource
-    const { title, marketingUrl, enrollment, run } = course
+  // Extract all conditional logic upfront
+  const isCourse = isDashboardCourse(dashboardResource)
+  const isProgram = isDashboardProgram(dashboardResource)
+  const isProgramCollection = isDashboardProgramCollection(dashboardResource)
 
-    const coursewareUrl = run.coursewareUrl
-    const titleHref =
-      titleAction === "marketing"
-        ? marketingUrl
-        : (coursewareUrl ?? marketingUrl)
-    const hasEnrolled =
-      enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
-    const titleClick: React.MouseEventHandler | undefined =
-      titleAction === "courseware" && coursewareUrl && !hasEnrolled
-        ? (e) => {
-            e.preventDefault()
-            if (!course.coursewareId) return
-            oneClickEnroll.mutate({
-              href: coursewareUrl,
-              coursewareId: course.coursewareId,
-            })
-          }
-        : undefined
-
-    const titleSection = isLoading ? (
-      <>
-        <Skeleton variant="text" width="95%" height={16} />
-        <Skeleton variant="text" width={120} height={16} />
-        <Skeleton variant="text" width={120} height={16} />
-      </>
-    ) : (
-      <>
+  // Early return for unsupported types
+  if (isProgramCollection) {
+    return <div>Program collection display not yet implemented</div>
+  }
+  if (!isCourse && !isProgram) {
+    return null
+  }
+
+  // Extract resource-specific data with proper type narrowing
+  const title = dashboardResource.title
+  const marketingUrl = isCourse ? dashboardResource.marketingUrl : undefined
+  const enrollment = isCourse ? dashboardResource.enrollment : undefined
+  const run = isCourse ? dashboardResource.run : undefined
+  const coursewareId = isCourse ? dashboardResource.coursewareId : null
+  const _resourceId = isProgram ? dashboardResource.id : undefined
+
+  // Title link logic
+  const coursewareUrl = run?.coursewareUrl
+  const titleHref = isCourse
+    ? titleAction === "marketing"
+      ? marketingUrl
+      : (coursewareUrl ?? marketingUrl)
+    : undefined // Programs don't have a title link yet
+
+  const hasEnrolled =
+    enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
+
+  const titleClick: React.MouseEventHandler | undefined =
+    isCourse && titleAction === "courseware" && coursewareUrl && !hasEnrolled
+      ? (e) => {
+          e.preventDefault()
+          if (!coursewareId) return
+          oneClickEnroll.mutate({
+            href: coursewareUrl,
+            coursewareId: coursewareId,
+          })
+        }
+      : undefined
+
+  // Build sections
+  const titleSection = isLoading ? (
+    <>
+      <Skeleton variant="text" width="95%" height={16} />
+      <Skeleton variant="text" width={120} height={16} />
+      <Skeleton variant="text" width={120} height={16} />
+    </>
+  ) : (
+    <>
+      {titleHref ? (
         <TitleLink
           size="medium"
           color="black"
@@ -452,69 +489,93 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         >
           {title}
         </TitleLink>
-        {enrollment?.status === EnrollmentStatus.Completed &&
-        run.certificate?.link ? (
-          <SubtitleLink href={run.certificate.link}>
-            {<RiAwardLine size="16px" />}
-            View Certificate
-          </SubtitleLink>
-        ) : null}
-        {enrollment?.mode !== EnrollmentMode.Verified && offerUpgrade ? (
-          <UpgradeBanner
-            data-testid="upgrade-root"
-            canUpgrade={run.canUpgrade ?? false}
-            certificateUpgradeDeadline={run.certificateUpgradeDeadline}
-            certificateUpgradePrice={run.certificateUpgradePrice}
-          />
-        ) : null}
-      </>
-    )
-    const buttonSection = isLoading ? (
-      <Skeleton variant="rectangular" width={120} height={32} />
-    ) : (
-      <>
-        <EnrollmentStatusIndicator
-          status={enrollment?.status}
-          showNotComplete={showNotComplete}
-        />
-        <CoursewareButton
-          data-testid="courseware-button"
-          coursewareId={course.coursewareId}
-          startDate={run.startDate}
-          enrollmentStatus={enrollment?.status}
-          href={buttonHref ? buttonHref : run.coursewareUrl}
-          endDate={run.endDate}
-          courseNoun={courseNoun}
+      ) : (
+        <TitleText>{title}</TitleText>
+      )}
+      {isCourse &&
+      enrollment?.status === EnrollmentStatus.Completed &&
+      run?.certificate?.link ? (
+        <SubtitleLink href={run.certificate.link}>
+          <RiAwardLine size="16px" />
+          View Certificate
+        </SubtitleLink>
+      ) : null}
+      {isCourse &&
+      enrollment?.mode !== EnrollmentMode.Verified &&
+      offerUpgrade ? (
+        <UpgradeBanner
+          data-testid="upgrade-root"
+          canUpgrade={run?.canUpgrade ?? false}
+          certificateUpgradeDeadline={run?.certificateUpgradeDeadline}
+          certificateUpgradePrice={run?.certificateUpgradePrice}
         />
-      </>
-    )
-    const startDateSection = isLoading ? (
-      <Skeleton variant="text" width={100} height={24} />
-    ) : run.startDate ? (
-      <CourseStartCountdown startDate={run.startDate} />
-    ) : null
-    const menuItems = contextMenuItems.concat(
-      enrollment?.id ? getDefaultContextMenuItems(title, enrollment) : [],
-    )
-    const contextMenu = isLoading ? (
-      <Skeleton variant="rectangular" width={12} height={24} />
-    ) : (
-      <SimpleMenu
-        items={menuItems}
-        trigger={
-          <MenuButton
-            size="small"
-            variant="text"
-            aria-label="More options"
-            status={enrollment?.status}
-            hidden={menuItems.length === 0}
-          >
-            <RiMore2Line />
-          </MenuButton>
-        }
+      ) : null}
+    </>
+  )
+
+  const buttonSection = isLoading ? (
+    <Skeleton variant="rectangular" width={120} height={32} />
+  ) : isCourse ? (
+    <>
+      <EnrollmentStatusIndicator
+        status={enrollment?.status}
+        showNotComplete={showNotComplete}
       />
-    )
-    const desktopLayout = (
+      <CoursewareButton
+        data-testid="courseware-button"
+        coursewareId={coursewareId}
+        startDate={run?.startDate}
+        enrollmentStatus={enrollment?.status}
+        href={buttonHref ?? run?.coursewareUrl}
+        endDate={run?.endDate}
+        courseNoun={courseNoun}
+      />
+    </>
+  ) : isProgram ? (
+    <ProgramButton
+      size="small"
+      variant="primary"
+      onClick={onCtaClick ? () => onCtaClick(dashboardResource) : undefined}
+      disabled={!onCtaClick}
+    >
+      View Program
+    </ProgramButton>
+  ) : null
+
+  const startDateSection = isLoading ? (
+    <Skeleton variant="text" width={100} height={24} />
+  ) : isCourse && run?.startDate ? (
+    <CourseStartCountdown startDate={run.startDate} />
+  ) : null
+
+  const menuItems = contextMenuItems.concat(
+    isCourse && enrollment?.id
+      ? getDefaultContextMenuItems(title, enrollment)
+      : [],
+  )
+
+  const contextMenu = isLoading ? (
+    <Skeleton variant="rectangular" width={12} height={24} />
+  ) : (
+    <SimpleMenu
+      items={menuItems}
+      trigger={
+        <MenuButton
+          size="small"
+          variant="text"
+          aria-label="More options"
+          status={enrollment?.status}
+          hidden={menuItems.length === 0}
+        >
+          <RiMore2Line />
+        </MenuButton>
+      }
+    />
+  )
+
+  // Single return block with unified layout
+  return (
+    <>
       <CardRoot
         screenSize="desktop"
         data-testid="enrollment-card-desktop"
@@ -532,9 +593,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
           {startDateSection}
         </Stack>
       </CardRoot>
-    )
 
-    const mobileLayout = (
       <CardRoot
         screenSize="mobile"
         data-testid="enrollment-card-mobile"
@@ -565,27 +624,8 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
           </Stack>
         </Stack>
       </CardRoot>
-    )
-    return (
-      <>
-        {desktopLayout}
-        {mobileLayout}
-      </>
-    )
-  } else if (isDashboardProgram(dashboardResource)) {
-    const program = dashboardResource
-    // TODO: Implement program display logic
-    // This will show either:
-    // 1. First course from the program (with course title and courseware CTA)
-    // 2. Program title with a JavaScript handler CTA
-    return <div>Program display not yet implemented: {program.title}</div>
-  } else if (isDashboardProgramCollection(dashboardResource)) {
-    // TODO: Implement program collection display logic
-    return <div>Program collection display not yet implemented</div>
-  }
-
-  // Fallback for unknown types
-  return null
+    </>
+  )
 }
 
 export {

From 1a2ffa7d20f8b2a451c2e066eb0647df78086fdd Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Thu, 20 Nov 2025 18:36:01 -0500
Subject: [PATCH 03/26] Add individual program display to EnrollmentDisplay and
 toggle it on and off in dashboard home when clicking program card CTA's

---
 .../CoursewareDisplay/DashboardCard.tsx       |  36 ++--
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 161 +++++++++++++++++-
 .../app-pages/DashboardPage/HomeContent.tsx   |  21 ++-
 3 files changed, 201 insertions(+), 17 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 0d00605d65..3a9aca3a77 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -100,8 +100,8 @@ const TitleLink = styled(Link)(({ theme }) => ({
 
 const TitleText = styled.div<{ clickable?: boolean }>(
   ({ theme, clickable }) => ({
-    ...theme.typography.subtitle1,
-    color: theme.custom.colors.black,
+    ...theme.typography.subtitle2,
+    color: theme.custom.colors.darkGray2,
     cursor: clickable ? "pointer" : "default",
     [theme.breakpoints.down("md")]: {
       maxWidth: "calc(100% - 16px)",
@@ -193,6 +193,7 @@ type CoursewareButtonProps = {
   className?: string
   courseNoun: string
   "data-testid"?: string
+  onClick?: React.MouseEventHandler<HTMLButtonElement>
 }
 
 const getCoursewareTextAndIcon = ({
@@ -225,6 +226,7 @@ const CoursewareButton = styled(
     href,
     className,
     courseNoun,
+    onClick,
     ...others
   }: CoursewareButtonProps) => {
     const coursewareText = getCoursewareTextAndIcon({
@@ -238,6 +240,20 @@ const CoursewareButton = styled(
 
     const oneClickEnroll = useOneClickEnroll()
 
+    if (onClick) {
+      return (
+        <Button
+          size="small"
+          variant="primary"
+          className={className}
+          onClick={onClick}
+          {...others}
+        >
+          {coursewareText.text}
+        </Button>
+      )
+    }
+
     if (!hasEnrolled /* enrollment flow */) {
       return (
         <Button
@@ -293,8 +309,6 @@ const CoursewareButton = styled(
   },
 )({ width: "124px" })
 
-const ProgramButton = styled(Button)({ width: "124px" })
-
 const formatUpgradeTime = (daysFloat: number) => {
   if (daysFloat < 0) return ""
   const days = Math.floor(daysFloat)
@@ -409,7 +423,7 @@ type DashboardCardProps = {
   contextMenuItems?: SimpleMenuItem[]
   isLoading?: boolean
   buttonHref?: string | null
-  onCtaClick?: (resource: DashboardResource) => void
+  buttonClick?: React.MouseEventHandler<HTMLButtonElement>
 }
 
 const DashboardCard: React.FC<DashboardCardProps> = ({
@@ -423,7 +437,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   isLoading = false,
   buttonHref,
   titleAction,
-  onCtaClick,
+  buttonClick,
 }) => {
   const oneClickEnroll = useOneClickEnroll()
 
@@ -529,17 +543,11 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         href={buttonHref ?? run?.coursewareUrl}
         endDate={run?.endDate}
         courseNoun={courseNoun}
+        onClick={buttonClick}
       />
     </>
   ) : isProgram ? (
-    <ProgramButton
-      size="small"
-      variant="primary"
-      onClick={onCtaClick ? () => onCtaClick(dashboardResource) : undefined}
-      disabled={!onCtaClick}
-    >
-      View Program
-    </ProgramButton>
+    <CoursewareButton courseNoun="Program" onClick={buttonClick} />
   ) : null
 
   const startDateSection = isLoading ? (
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 67b7619add..295dcf2059 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -5,6 +5,7 @@ import {
   Link,
   PlainList,
   PlainListProps,
+  Stack,
   Typography,
   TypographyProps,
   styled,
@@ -12,12 +13,25 @@ import {
 } from "ol-components"
 import { useQuery } from "@tanstack/react-query"
 import {
+  mitxonlineCourse,
+  mitxonlineProgram,
   programEnrollmentsToPrograms,
   userEnrollmentsToDashboardCourses,
 } from "./transform"
 import { DashboardCard } from "./DashboardCard"
-import { DashboardCourse, DashboardProgram, EnrollmentStatus } from "./types"
+import {
+  DashboardCourse,
+  DashboardCourseEnrollment,
+  DashboardProgram,
+  EnrollmentStatus,
+} from "./types"
 import type { AxiosError } from "axios"
+import { coursesQueries } from "api/mitxonline-hooks/courses"
+import { programsQueries } from "api/mitxonline-hooks/programs"
+import { Button } from "@mitodl/smoot-design"
+import { RiArrowLeftLine } from "@remixicon/react"
+import { useRouter } from "next-nprogress-bar"
+import { DASHBOARD_HOME } from "@/common/urls"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -127,6 +141,7 @@ interface EnrollmentExpandCollapseProps {
   hiddenCourseRunEnrollments: DashboardCourse[]
   programEnrollments?: DashboardProgram[]
   isLoading?: boolean
+  onViewProgram?: (programId: number) => void
 }
 
 const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
@@ -134,6 +149,7 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   hiddenCourseRunEnrollments,
   programEnrollments,
   isLoading,
+  onViewProgram,
 }) => {
   const [shown, setShown] = React.useState(false)
 
@@ -163,6 +179,9 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
             dashboardResource={program}
             showNotComplete={false}
             isLoading={isLoading}
+            buttonClick={
+              onViewProgram ? () => onViewProgram(program.id) : undefined
+            }
           />
         ))}
       </EnrollmentsList>
@@ -193,7 +212,128 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   )
 }
 
-const EnrollmentDisplay = () => {
+interface ProgramEnrollmentDisplayProps {
+  programId: number
+}
+
+const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
+  programId,
+}) => {
+  const router = useRouter()
+  const { data: userCourses, isLoading: userEnrollmentsLoading } = useQuery({
+    ...enrollmentQueries.courseRunEnrollmentsList(),
+    select: userEnrollmentsToDashboardCourses,
+  })
+  const { data: rawProgram, isLoading: programLoading } = useQuery(
+    programsQueries.programDetail({ id: programId }),
+  )
+  const program = rawProgram ? mitxonlineProgram(rawProgram) : undefined
+  const { data: rawProgramCourses, isLoading: programCoursesLoading } =
+    useQuery(coursesQueries.coursesList({ id: program?.courseIds }))
+  const programCourses = rawProgramCourses?.results.map((course) => {
+    const enrollment = userCourses?.find((dashboardCourse) =>
+      course.courseruns.some(
+        (run) => run.courseware_id === dashboardCourse.coursewareId,
+      ),
+    )?.enrollment
+    return mitxonlineCourse(course, enrollment)
+  })
+  const rawProgramCourseEnrollments = userCourses?.filter((course) => {
+    return rawProgramCourses?.results.some((programCourse) =>
+      programCourse.courseruns.some(
+        (run) => run.courseware_id === course.coursewareId,
+      ),
+    )
+  })
+  const programCourseEnrollments = rawProgramCourseEnrollments
+    ?.map((course) => {
+      return course.enrollment ?? undefined
+    })
+    .filter(
+      (enrollment) => enrollment !== undefined,
+    ) as DashboardCourseEnrollment[]
+  const completedEnrollments = programCourseEnrollments?.filter(
+    (enrollment) => enrollment.status === EnrollmentStatus.Completed,
+  )
+  return (
+    <>
+      <Stack direction="column">
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          marginBottom="24px"
+        >
+          <Stack direction="column">
+            <Typography variant="h5" color={theme.custom.colors.silverGrayDark}>
+              MITx | {program?.programType}
+            </Typography>
+            <Typography variant="h3" paddingBottom="32px">
+              {program?.title}
+            </Typography>
+            <Typography variant="body2">
+              You have completed
+              <Typography component="span" variant="subtitle2">
+                {" "}
+                {completedEnrollments?.length} of {programCourses?.length}{" "}
+                courses{" "}
+              </Typography>
+              for this program.
+            </Typography>
+          </Stack>
+          <Stack direction="column">
+            <Button
+              variant="tertiary"
+              size="small"
+              startIcon={<RiArrowLeftLine />}
+              onClick={() => router.push(DASHBOARD_HOME)}
+            >
+              Back
+            </Button>
+          </Stack>
+        </Stack>
+        <Stack
+          direction="row"
+          justifyContent="space-between"
+          marginBottom="16px"
+        >
+          <Typography variant="subtitle2" color={theme.custom.colors.red}>
+            Core Courses
+          </Typography>
+          <Typography
+            variant="body2"
+            color={theme.custom.colors.silverGrayDark}
+          >
+            Completed {completedEnrollments?.length} of {programCourses?.length}
+          </Typography>
+        </Stack>
+        <EnrollmentsList itemSpacing={"16px"}>
+          {programCourses?.map((course) => (
+            <DashboardCardStyled
+              titleAction="marketing"
+              key={course.key}
+              Component="li"
+              dashboardResource={course}
+              showNotComplete={false}
+              isLoading={
+                userEnrollmentsLoading ||
+                programLoading ||
+                programCoursesLoading
+              }
+            />
+          ))}
+        </EnrollmentsList>
+      </Stack>
+    </>
+  )
+}
+
+interface AllEnrollmentsDisplayProps {
+  onViewProgram?: (programId: number) => void
+}
+
+const AllEnrollmentsDisplay: React.FC<AllEnrollmentsDisplayProps> = ({
+  onViewProgram,
+}) => {
   const onError = (error: Error) => {
     const err = error as AxiosError<{ detail?: string }>
     const status = err?.response?.status
@@ -237,9 +377,26 @@ const EnrollmentDisplay = () => {
         hiddenCourseRunEnrollments={expired}
         programEnrollments={programEnrollments || []}
         isLoading={courseEnrollmentsLoading || programEnrollmentsLoading}
+        onViewProgram={onViewProgram}
       />
     </Wrapper>
   ) : null
 }
 
+interface EnrollmentDisplayProps {
+  onViewProgram?: (programId: number) => void
+  programId?: number
+}
+
+const EnrollmentDisplay: React.FC<EnrollmentDisplayProps> = ({
+  onViewProgram,
+  programId,
+}) => {
+  if (programId) {
+    return <ProgramEnrollmentDisplay programId={programId} />
+  }
+
+  return <AllEnrollmentsDisplay onViewProgram={onViewProgram} />
+}
+
 export { EnrollmentDisplay }
diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
index 8b4e022d08..9e57e617eb 100644
--- a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
@@ -77,6 +77,13 @@ const HomeContent: React.FC = () => {
   const router = useRouter()
   const enrollmentError = searchParams.get(ENROLLMENT_ERROR_QUERY_PARAM)
   const [showEnrollmentError, setShowEnrollmentError] = React.useState(false)
+  const programIdParam = searchParams.get("program")
+  const viewState:
+    | { type: "dashboard" }
+    | { type: "program"; programId: number } =
+    programIdParam && !isNaN(parseInt(programIdParam))
+      ? { type: "program", programId: parseInt(programIdParam) }
+      : { type: "dashboard" }
   const { isLoading: isLoadingProfile, data: user } = useUserMe()
   const topics = user?.profile?.preference_search_filters.topic
   const certification = user?.profile?.preference_search_filters.certification
@@ -85,6 +92,12 @@ const HomeContent: React.FC = () => {
   )
   const supportEmail = process.env.NEXT_PUBLIC_MITOL_SUPPORT_EMAIL || ""
 
+  const handleViewProgram = (programId: number) => {
+    const newParams = new URLSearchParams(searchParams.toString())
+    newParams.set("program", programId.toString())
+    router.push(`${window.location.pathname}?${newParams.toString()}`)
+  }
+
   // Show error and clear the query param
   React.useEffect(() => {
     if (enrollmentError) {
@@ -98,6 +111,10 @@ const HomeContent: React.FC = () => {
     }
   }, [enrollmentError, searchParams, router])
 
+  if (viewState.type === "program") {
+    return <EnrollmentDisplay programId={viewState.programId} />
+  }
+
   return (
     <>
       <HomeHeader>
@@ -129,7 +146,9 @@ const HomeContent: React.FC = () => {
         </AlertBanner>
       )}
       <OrganizationCards />
-      {showEnrollments ? <EnrollmentDisplay /> : null}
+      {showEnrollments ? (
+        <EnrollmentDisplay onViewProgram={handleViewProgram} />
+      ) : null}
       <Suspense>
         <StyledResourceCarousel
           titleComponent="h2"

From 5cb60b359e88d88354d4e24db58e6c6a6ad1befc Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Thu, 20 Nov 2025 18:56:14 -0500
Subject: [PATCH 04/26] add "stacked" card style directly to DashboardCard as a
 variant

---
 .../CoursewareDisplay/DashboardCard.tsx       | 30 ++++++++++++++++++-
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 18 +++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 3a9aca3a77..b5ac01829f 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -62,7 +62,8 @@ const isDashboardProgramCollection = (
 
 const CardRoot = styled.div<{
   screenSize: "desktop" | "mobile"
-}>(({ theme, screenSize }) => [
+  variant?: "default" | "stacked"
+}>(({ theme, screenSize, variant = "default" }) => [
   {
     position: "relative",
     border: `1px solid ${theme.custom.colors.lightGray2}`,
@@ -71,6 +72,9 @@ const CardRoot = styled.div<{
     display: "flex",
     gap: "8px",
     alignItems: "center",
+  },
+  // Mobile styles for default variant
+  variant === "default" && {
     [theme.breakpoints.down("md")]: {
       border: "none",
       borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
@@ -80,6 +84,26 @@ const CardRoot = styled.div<{
       gap: "16px",
     },
   },
+  // Stacked variant styles
+  variant === "stacked" && {
+    border: "none",
+    borderBottom: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "0px !important",
+    boxShadow: "none",
+    "&:first-of-type": {
+      borderTopLeftRadius: "8px !important",
+      borderTopRightRadius: "8px !important",
+    },
+    "&:last-of-type": {
+      borderBottomLeftRadius: "8px !important",
+      borderBottomRightRadius: "8px !important",
+      borderBottom: "none",
+    },
+    [theme.breakpoints.down("md")]: {
+      flexDirection: "column",
+      gap: "16px",
+    },
+  },
   screenSize === "desktop" && {
     [theme.breakpoints.down("md")]: {
       display: "none",
@@ -424,6 +448,7 @@ type DashboardCardProps = {
   isLoading?: boolean
   buttonHref?: string | null
   buttonClick?: React.MouseEventHandler<HTMLButtonElement>
+  variant?: "default" | "stacked"
 }
 
 const DashboardCard: React.FC<DashboardCardProps> = ({
@@ -438,6 +463,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   buttonHref,
   titleAction,
   buttonClick,
+  variant = "default",
 }) => {
   const oneClickEnroll = useOneClickEnroll()
 
@@ -589,6 +615,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         data-testid="enrollment-card-desktop"
         as={Component}
         className={className}
+        variant={variant}
       >
         <Stack justifyContent="start" alignItems="stretch" gap="8px" flex={1}>
           {titleSection}
@@ -607,6 +634,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         data-testid="enrollment-card-mobile"
         as={Component}
         className={className}
+        variant={variant}
       >
         <Stack
           direction="row"
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 295dcf2059..6a5b602b6e 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -75,6 +75,18 @@ const EnrollmentsList = styled(PlainList)<Pick<PlainListProps, "itemSpacing">>(
   }),
 )
 
+const StackedCardContainer = styled.div(({ theme }) => ({
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  borderRadius: "8px",
+  boxShadow: "0px 1px 6px 0px rgba(3, 21, 45, 0.05)",
+  overflow: "hidden",
+  [theme.breakpoints.down("md")]: {
+    border: `1px solid ${theme.custom.colors.lightGray2}`,
+    borderRadius: "8px !important",
+    borderBottom: `1px solid ${theme.custom.colors.red}`,
+  },
+}))
+
 const HiddenEnrollmentsList = styled(EnrollmentsList)({
   marginTop: "16px",
   [theme.breakpoints.down("md")]: {
@@ -306,14 +318,14 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
             Completed {completedEnrollments?.length} of {programCourses?.length}
           </Typography>
         </Stack>
-        <EnrollmentsList itemSpacing={"16px"}>
+        <StackedCardContainer>
           {programCourses?.map((course) => (
             <DashboardCardStyled
               titleAction="marketing"
               key={course.key}
-              Component="li"
               dashboardResource={course}
               showNotComplete={false}
+              variant="stacked"
               isLoading={
                 userEnrollmentsLoading ||
                 programLoading ||
@@ -321,7 +333,7 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
               }
             />
           ))}
-        </EnrollmentsList>
+        </StackedCardContainer>
       </Stack>
     </>
   )

From c773d3f67be8ef59b43b96749cd9bf61fa571e46 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 16:38:36 -0500
Subject: [PATCH 05/26] rearrange HomeContent so recommendation carousels are
 still shown if program contents are being displayed

---
 .../app-pages/DashboardPage/HomeContent.tsx   | 72 ++++++++++---------
 1 file changed, 37 insertions(+), 35 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
index 9e57e617eb..b1f9e3eea1 100644
--- a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
@@ -111,44 +111,46 @@ const HomeContent: React.FC = () => {
     }
   }, [enrollmentError, searchParams, router])
 
-  if (viewState.type === "program") {
-    return <EnrollmentDisplay programId={viewState.programId} />
-  }
-
   return (
     <>
-      <HomeHeader>
-        <HomeHeaderLeft>
-          <TitleText component="h1">Your MIT Learning Journey</TitleText>
-          <SubTitleText>
-            A customized course list based on your preferences.
-          </SubTitleText>
-        </HomeHeaderLeft>
-        <HomeHeaderRight>
-          <ButtonLink variant="tertiary" href={PROFILE}>
-            Edit Profile
-          </ButtonLink>
-        </HomeHeaderRight>
-      </HomeHeader>
-      {showEnrollmentError && (
-        <AlertBanner severity="error" closable={true}>
-          <Typography variant="subtitle2" component="span">
-            Enrollment Error
-          </Typography>
-          <Typography variant="body2" component="span">
-            {" - "}
-            The Enrollment Code is incorrect or no longer available.{" "}
-            <Link color="red" href={`mailto:${supportEmail}`}>
-              Contact Support
-            </Link>{" "}
-            for assistance.
-          </Typography>
-        </AlertBanner>
+      {viewState.type === "program" && showEnrollments ? (
+        <EnrollmentDisplay programId={viewState.programId} />
+      ) : (
+        <>
+          <HomeHeader>
+            <HomeHeaderLeft>
+              <TitleText component="h1">Your MIT Learning Journey</TitleText>
+              <SubTitleText>
+                A customized course list based on your preferences.
+              </SubTitleText>
+            </HomeHeaderLeft>
+            <HomeHeaderRight>
+              <ButtonLink variant="tertiary" href={PROFILE}>
+                Edit Profile
+              </ButtonLink>
+            </HomeHeaderRight>
+          </HomeHeader>
+          {showEnrollmentError && (
+            <AlertBanner severity="error" closable={true}>
+              <Typography variant="subtitle2" component="span">
+                Enrollment Error
+              </Typography>
+              <Typography variant="body2" component="span">
+                {" - "}
+                The Enrollment Code is incorrect or no longer available.{" "}
+                <Link color="red" href={`mailto:${supportEmail}`}>
+                  Contact Support
+                </Link>{" "}
+                for assistance.
+              </Typography>
+            </AlertBanner>
+          )}
+          <OrganizationCards />
+          {showEnrollments ? (
+            <EnrollmentDisplay onViewProgram={handleViewProgram} />
+          ) : null}
+        </>
       )}
-      <OrganizationCards />
-      {showEnrollments ? (
-        <EnrollmentDisplay onViewProgram={handleViewProgram} />
-      ) : null}
       <Suspense>
         <StyledResourceCarousel
           titleComponent="h2"

From 01de495f8becf9674b8dd9d0cfdd86504cb01f01 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 18:13:01 -0500
Subject: [PATCH 06/26] move program display to its own page route and
 component

---
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 30 +++----
 .../app-pages/DashboardPage/HomeContent.tsx   | 79 +++++++------------
 .../DashboardPage/ProgramContent.tsx          | 14 ++++
 .../src/app/dashboard/program/[id]/page.tsx   | 17 ++++
 frontends/main/src/common/urls.ts             |  3 +
 5 files changed, 73 insertions(+), 70 deletions(-)
 create mode 100644 frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx
 create mode 100644 frontends/main/src/app/dashboard/program/[id]/page.tsx

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 6a5b602b6e..36229ed47b 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -31,7 +31,7 @@ import { programsQueries } from "api/mitxonline-hooks/programs"
 import { Button } from "@mitodl/smoot-design"
 import { RiArrowLeftLine } from "@remixicon/react"
 import { useRouter } from "next-nprogress-bar"
-import { DASHBOARD_HOME } from "@/common/urls"
+import { DASHBOARD_HOME, programView } from "@/common/urls"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -153,7 +153,6 @@ interface EnrollmentExpandCollapseProps {
   hiddenCourseRunEnrollments: DashboardCourse[]
   programEnrollments?: DashboardProgram[]
   isLoading?: boolean
-  onViewProgram?: (programId: number) => void
 }
 
 const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
@@ -161,15 +160,19 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   hiddenCourseRunEnrollments,
   programEnrollments,
   isLoading,
-  onViewProgram,
 }) => {
   const [shown, setShown] = React.useState(false)
+  const router = useRouter()
 
   const handleToggle = (event: React.MouseEvent) => {
     event.preventDefault()
     setShown(!shown)
   }
 
+  const handleViewProgram = (programId: number) => {
+    router.push(programView(programId))
+  }
+
   return (
     <>
       <EnrollmentsList itemSpacing={"16px"}>
@@ -191,9 +194,7 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
             dashboardResource={program}
             showNotComplete={false}
             isLoading={isLoading}
-            buttonClick={
-              onViewProgram ? () => onViewProgram(program.id) : undefined
-            }
+            buttonClick={() => handleViewProgram(program.id)}
           />
         ))}
       </EnrollmentsList>
@@ -339,13 +340,7 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
   )
 }
 
-interface AllEnrollmentsDisplayProps {
-  onViewProgram?: (programId: number) => void
-}
-
-const AllEnrollmentsDisplay: React.FC<AllEnrollmentsDisplayProps> = ({
-  onViewProgram,
-}) => {
+const AllEnrollmentsDisplay: React.FC = () => {
   const onError = (error: Error) => {
     const err = error as AxiosError<{ detail?: string }>
     const status = err?.response?.status
@@ -389,26 +384,21 @@ const AllEnrollmentsDisplay: React.FC<AllEnrollmentsDisplayProps> = ({
         hiddenCourseRunEnrollments={expired}
         programEnrollments={programEnrollments || []}
         isLoading={courseEnrollmentsLoading || programEnrollmentsLoading}
-        onViewProgram={onViewProgram}
       />
     </Wrapper>
   ) : null
 }
 
 interface EnrollmentDisplayProps {
-  onViewProgram?: (programId: number) => void
   programId?: number
 }
 
-const EnrollmentDisplay: React.FC<EnrollmentDisplayProps> = ({
-  onViewProgram,
-  programId,
-}) => {
+const EnrollmentDisplay: React.FC<EnrollmentDisplayProps> = ({ programId }) => {
   if (programId) {
     return <ProgramEnrollmentDisplay programId={programId} />
   }
 
-  return <AllEnrollmentsDisplay onViewProgram={onViewProgram} />
+  return <AllEnrollmentsDisplay />
 }
 
 export { EnrollmentDisplay }
diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
index b1f9e3eea1..8b4e022d08 100644
--- a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
@@ -77,13 +77,6 @@ const HomeContent: React.FC = () => {
   const router = useRouter()
   const enrollmentError = searchParams.get(ENROLLMENT_ERROR_QUERY_PARAM)
   const [showEnrollmentError, setShowEnrollmentError] = React.useState(false)
-  const programIdParam = searchParams.get("program")
-  const viewState:
-    | { type: "dashboard" }
-    | { type: "program"; programId: number } =
-    programIdParam && !isNaN(parseInt(programIdParam))
-      ? { type: "program", programId: parseInt(programIdParam) }
-      : { type: "dashboard" }
   const { isLoading: isLoadingProfile, data: user } = useUserMe()
   const topics = user?.profile?.preference_search_filters.topic
   const certification = user?.profile?.preference_search_filters.certification
@@ -92,12 +85,6 @@ const HomeContent: React.FC = () => {
   )
   const supportEmail = process.env.NEXT_PUBLIC_MITOL_SUPPORT_EMAIL || ""
 
-  const handleViewProgram = (programId: number) => {
-    const newParams = new URLSearchParams(searchParams.toString())
-    newParams.set("program", programId.toString())
-    router.push(`${window.location.pathname}?${newParams.toString()}`)
-  }
-
   // Show error and clear the query param
   React.useEffect(() => {
     if (enrollmentError) {
@@ -113,44 +100,36 @@ const HomeContent: React.FC = () => {
 
   return (
     <>
-      {viewState.type === "program" && showEnrollments ? (
-        <EnrollmentDisplay programId={viewState.programId} />
-      ) : (
-        <>
-          <HomeHeader>
-            <HomeHeaderLeft>
-              <TitleText component="h1">Your MIT Learning Journey</TitleText>
-              <SubTitleText>
-                A customized course list based on your preferences.
-              </SubTitleText>
-            </HomeHeaderLeft>
-            <HomeHeaderRight>
-              <ButtonLink variant="tertiary" href={PROFILE}>
-                Edit Profile
-              </ButtonLink>
-            </HomeHeaderRight>
-          </HomeHeader>
-          {showEnrollmentError && (
-            <AlertBanner severity="error" closable={true}>
-              <Typography variant="subtitle2" component="span">
-                Enrollment Error
-              </Typography>
-              <Typography variant="body2" component="span">
-                {" - "}
-                The Enrollment Code is incorrect or no longer available.{" "}
-                <Link color="red" href={`mailto:${supportEmail}`}>
-                  Contact Support
-                </Link>{" "}
-                for assistance.
-              </Typography>
-            </AlertBanner>
-          )}
-          <OrganizationCards />
-          {showEnrollments ? (
-            <EnrollmentDisplay onViewProgram={handleViewProgram} />
-          ) : null}
-        </>
+      <HomeHeader>
+        <HomeHeaderLeft>
+          <TitleText component="h1">Your MIT Learning Journey</TitleText>
+          <SubTitleText>
+            A customized course list based on your preferences.
+          </SubTitleText>
+        </HomeHeaderLeft>
+        <HomeHeaderRight>
+          <ButtonLink variant="tertiary" href={PROFILE}>
+            Edit Profile
+          </ButtonLink>
+        </HomeHeaderRight>
+      </HomeHeader>
+      {showEnrollmentError && (
+        <AlertBanner severity="error" closable={true}>
+          <Typography variant="subtitle2" component="span">
+            Enrollment Error
+          </Typography>
+          <Typography variant="body2" component="span">
+            {" - "}
+            The Enrollment Code is incorrect or no longer available.{" "}
+            <Link color="red" href={`mailto:${supportEmail}`}>
+              Contact Support
+            </Link>{" "}
+            for assistance.
+          </Typography>
+        </AlertBanner>
       )}
+      <OrganizationCards />
+      {showEnrollments ? <EnrollmentDisplay /> : null}
       <Suspense>
         <StyledResourceCarousel
           titleComponent="h2"
diff --git a/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx b/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx
new file mode 100644
index 0000000000..3737564948
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/ProgramContent.tsx
@@ -0,0 +1,14 @@
+"use client"
+
+import React from "react"
+import { EnrollmentDisplay } from "./CoursewareDisplay/EnrollmentDisplay"
+
+interface ProgramContentProps {
+  programId: number
+}
+
+const ProgramContent: React.FC<ProgramContentProps> = ({ programId }) => {
+  return <EnrollmentDisplay programId={programId} />
+}
+
+export default ProgramContent
diff --git a/frontends/main/src/app/dashboard/program/[id]/page.tsx b/frontends/main/src/app/dashboard/program/[id]/page.tsx
new file mode 100644
index 0000000000..d1227e8dd8
--- /dev/null
+++ b/frontends/main/src/app/dashboard/program/[id]/page.tsx
@@ -0,0 +1,17 @@
+import React from "react"
+import ProgramContent from "@/app-pages/DashboardPage/ProgramContent"
+import { notFound } from "next/navigation"
+
+const Page: React.FC<PageProps<"/dashboard/program/[id]">> = async ({
+  params,
+}) => {
+  const resolved = await params
+  const id = Number(resolved.id)
+  if (Number.isNaN(id)) {
+    notFound()
+  }
+
+  return <ProgramContent programId={id} />
+}
+
+export default Page
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
index b70edf1181..3eba0539e7 100644
--- a/frontends/main/src/common/urls.ts
+++ b/frontends/main/src/common/urls.ts
@@ -72,6 +72,9 @@ export const userListView = (id: number) =>
 export const ORGANIZATION_VIEW = "/dashboard/organization/[slug]"
 export const organizationView = (slug: string) =>
   generatePath(ORGANIZATION_VIEW, { slug: slug })
+export const PROGRAM_VIEW = "/dashboard/program/[id]"
+export const programView = (id: number) =>
+  generatePath(PROGRAM_VIEW, { id: String(id) })
 
 export const SEARCH = "/search"
 

From 9ae298fc701d1dae11d8878c8bb7e87e6932ac8a Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 18:43:14 -0500
Subject: [PATCH 07/26] Fix program CTA text

---
 .../CoursewareDisplay/DashboardCard.tsx       | 48 ++++++++++++++-----
 .../CoursewareDisplay/EnrollmentDisplay.tsx   |  8 +---
 .../CoursewareDisplay/transform.ts            | 21 +++++++-
 .../DashboardPage/CoursewareDisplay/types.ts  | 10 ++++
 4 files changed, 66 insertions(+), 21 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index b5ac01829f..9e95f65ef1 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -40,6 +40,7 @@ import NiceModal from "@ebay/nice-modal-react"
 import { useCreateEnrollment } from "api/mitxonline-hooks/enrollment"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
+import { programView } from "@/common/urls"
 
 // Type guard functions
 const isDashboardCourse = (
@@ -215,7 +216,8 @@ type CoursewareButtonProps = {
   enrollmentStatus?: EnrollmentStatus | null
   href?: string | null
   className?: string
-  courseNoun: string
+  noun: string
+  resourceType?: DashboardResourceType
   "data-testid"?: string
   onClick?: React.MouseEventHandler<HTMLButtonElement>
 }
@@ -223,20 +225,29 @@ type CoursewareButtonProps = {
 const getCoursewareTextAndIcon = ({
   endDate,
   enrollmentStatus,
-  courseNoun,
+  noun,
+  resourceType,
 }: {
   endDate?: string | null
   enrollmentStatus?: EnrollmentStatus | null
-  courseNoun: string
+  noun: string
+  resourceType?: DashboardResourceType
 }) => {
   if (!enrollmentStatus || enrollmentStatus === EnrollmentStatus.NotEnrolled) {
-    return { text: `Start ${courseNoun}`, endIcon: null }
+    return { text: `Start ${noun}`, endIcon: null }
   }
   if (
     (endDate && isInPast(endDate)) ||
     enrollmentStatus === EnrollmentStatus.Completed
   ) {
-    return { text: `View ${courseNoun}`, endIcon: null }
+    return { text: `View ${noun}`, endIcon: null }
+  }
+  // Programs show "View Program" when enrolled, courses show "Continue"
+  if (
+    resourceType === DashboardResourceType.Program &&
+    enrollmentStatus === EnrollmentStatus.Enrolled
+  ) {
+    return { text: `View ${noun}`, endIcon: null }
   }
   return { text: "Continue", endIcon: <RiArrowRightLine /> }
 }
@@ -249,14 +260,16 @@ const CoursewareButton = styled(
     enrollmentStatus,
     href,
     className,
-    courseNoun,
+    noun,
+    resourceType,
     onClick,
     ...others
   }: CoursewareButtonProps) => {
     const coursewareText = getCoursewareTextAndIcon({
       endDate,
-      courseNoun,
+      noun,
       enrollmentStatus,
+      resourceType,
     })
     const hasStarted = startDate && isInPast(startDate)
     const hasEnrolled =
@@ -303,7 +316,10 @@ const CoursewareButton = styled(
           {coursewareText.text}
         </Button>
       )
-    } else if (hasStarted && href /* Link to course */) {
+    } else if (
+      (hasStarted || !startDate) &&
+      href /* Link to course or program */
+    ) {
       return (
         <ButtonLink
           size="small"
@@ -317,7 +333,7 @@ const CoursewareButton = styled(
         </ButtonLink>
       )
     }
-    // Disabled
+    // Disabled (course not started yet)
     return (
       <Button
         size="small"
@@ -442,7 +458,7 @@ type DashboardCardProps = {
   dashboardResource: DashboardResource
   showNotComplete?: boolean
   className?: string
-  courseNoun?: string
+  noun?: string
   offerUpgrade?: boolean
   contextMenuItems?: SimpleMenuItem[]
   isLoading?: boolean
@@ -456,7 +472,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   showNotComplete = true,
   Component,
   className,
-  courseNoun = "Course",
+  noun = "Course",
   offerUpgrade = true,
   contextMenuItems = [],
   isLoading = false,
@@ -568,12 +584,18 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         enrollmentStatus={enrollment?.status}
         href={buttonHref ?? run?.coursewareUrl}
         endDate={run?.endDate}
-        courseNoun={courseNoun}
+        noun={noun}
+        resourceType={DashboardResourceType.Course}
         onClick={buttonClick}
       />
     </>
   ) : isProgram ? (
-    <CoursewareButton courseNoun="Program" onClick={buttonClick} />
+    <CoursewareButton
+      noun="Program"
+      resourceType={DashboardResourceType.Program}
+      enrollmentStatus={dashboardResource.enrollment?.status}
+      href={buttonHref ?? programView(dashboardResource.id)}
+    />
   ) : null
 
   const startDateSection = isLoading ? (
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 36229ed47b..172e80f8c2 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -31,7 +31,7 @@ import { programsQueries } from "api/mitxonline-hooks/programs"
 import { Button } from "@mitodl/smoot-design"
 import { RiArrowLeftLine } from "@remixicon/react"
 import { useRouter } from "next-nprogress-bar"
-import { DASHBOARD_HOME, programView } from "@/common/urls"
+import { DASHBOARD_HOME } from "@/common/urls"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -162,17 +162,12 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   isLoading,
 }) => {
   const [shown, setShown] = React.useState(false)
-  const router = useRouter()
 
   const handleToggle = (event: React.MouseEvent) => {
     event.preventDefault()
     setShown(!shown)
   }
 
-  const handleViewProgram = (programId: number) => {
-    router.push(programView(programId))
-  }
-
   return (
     <>
       <EnrollmentsList itemSpacing={"16px"}>
@@ -194,7 +189,6 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
             dashboardResource={program}
             showNotComplete={false}
             isLoading={isLoading}
-            buttonClick={() => handleViewProgram(program.id)}
           />
         ))}
       </EnrollmentsList>
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index 3d805666ec..64d02fe09f 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -19,6 +19,7 @@ import type {
   DashboardContract,
   DashboardCourse,
   DashboardCourseEnrollment,
+  DashboardProgramEnrollment,
   DashboardProgram,
   DashboardProgramCollection,
 } from "./types"
@@ -100,6 +101,20 @@ const transformEnrollmentToDashboard = (
   }
 }
 
+const transformProgramEnrollmentToDashboard = (
+  raw: V2UserProgramEnrollmentDetail,
+): DashboardProgramEnrollment => {
+  return {
+    status: EnrollmentStatus.Enrolled,
+    certificate: raw.certificate
+      ? {
+          uuid: raw.certificate.uuid,
+          link: `/certificate/program/${raw.certificate.uuid}/`,
+        }
+      : undefined,
+  }
+}
+
 const filterEnrollmentsByOrganization = (
   enrollments: CourseRunEnrollmentRequestV2[],
   organizationId: number,
@@ -259,7 +274,10 @@ const programEnrollmentsToPrograms = (
   })
 
   return nonB2BProgramEnrollments.map((programEnrollment) => {
-    return mitxonlineProgram(programEnrollment.program)
+    const program = mitxonlineProgram(programEnrollment.program)
+    program.enrollment =
+      transformProgramEnrollmentToDashboard(programEnrollment)
+    return program
   })
 }
 
@@ -311,6 +329,7 @@ export {
   mitxonlineCourse,
   userEnrollmentsToDashboardCourses,
   transformEnrollmentToDashboard,
+  transformProgramEnrollmentToDashboard,
   mitxonlineOrgContract,
   enrollmentsToOrgDashboardEnrollments,
   organizationCoursesWithContracts,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
index dc45f6e3a5..86dfc0d2fb 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -65,6 +65,14 @@ type DashboardCourseEnrollment = {
   }
 }
 
+type DashboardProgramEnrollment = {
+  status: EnrollmentStatus
+  certificate?: {
+    uuid: string
+    link: string
+  }
+}
+
 type DashboardProgram = {
   id: number
   key: string
@@ -74,6 +82,7 @@ type DashboardProgram = {
   courseIds: number[]
   collections: number[]
   description: string
+  enrollment?: DashboardProgramEnrollment
 }
 
 type DashboardProgramCollection = {
@@ -101,6 +110,7 @@ export type {
   DashboardContract,
   DashboardCourse,
   DashboardCourseEnrollment,
+  DashboardProgramEnrollment,
   DashboardProgram,
   DashboardProgramCollection,
   DashboardProgramCollectionProgram,

From d2cf7fe49d4e8552f16e67724683f07837566fc6 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 18:47:03 -0500
Subject: [PATCH 08/26] remove manual back button

---
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 50 ++++++-------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 172e80f8c2..58ea771fae 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -28,10 +28,6 @@ import {
 import type { AxiosError } from "axios"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
 import { programsQueries } from "api/mitxonline-hooks/programs"
-import { Button } from "@mitodl/smoot-design"
-import { RiArrowLeftLine } from "@remixicon/react"
-import { useRouter } from "next-nprogress-bar"
-import { DASHBOARD_HOME } from "@/common/urls"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -226,7 +222,6 @@ interface ProgramEnrollmentDisplayProps {
 const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
   programId,
 }) => {
-  const router = useRouter()
   const { data: userCourses, isLoading: userEnrollmentsLoading } = useQuery({
     ...enrollmentQueries.courseRunEnrollmentsList(),
     select: userEnrollmentsToDashboardCourses,
@@ -265,38 +260,21 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
   return (
     <>
       <Stack direction="column">
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          marginBottom="24px"
-        >
-          <Stack direction="column">
-            <Typography variant="h5" color={theme.custom.colors.silverGrayDark}>
-              MITx | {program?.programType}
-            </Typography>
-            <Typography variant="h3" paddingBottom="32px">
-              {program?.title}
-            </Typography>
-            <Typography variant="body2">
-              You have completed
-              <Typography component="span" variant="subtitle2">
-                {" "}
-                {completedEnrollments?.length} of {programCourses?.length}{" "}
-                courses{" "}
-              </Typography>
-              for this program.
+        <Stack direction="column" marginBottom="24px">
+          <Typography variant="h5" color={theme.custom.colors.silverGrayDark}>
+            MITx | {program?.programType}
+          </Typography>
+          <Typography variant="h3" paddingBottom="32px">
+            {program?.title}
+          </Typography>
+          <Typography variant="body2">
+            You have completed
+            <Typography component="span" variant="subtitle2">
+              {" "}
+              {completedEnrollments?.length} of {programCourses?.length} courses{" "}
             </Typography>
-          </Stack>
-          <Stack direction="column">
-            <Button
-              variant="tertiary"
-              size="small"
-              startIcon={<RiArrowLeftLine />}
-              onClick={() => router.push(DASHBOARD_HOME)}
-            >
-              Back
-            </Button>
-          </Stack>
+            for this program.
+          </Typography>
         </Stack>
         <Stack
           direction="row"

From 3932f0772323d642b8e1e8f1f20d1ea45cd64a4b Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 21:14:59 -0500
Subject: [PATCH 09/26] Set up the program page to use req_tree when displaying
 the program's requirements

---
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 167 ++++++++++++------
 .../CoursewareDisplay/transform.ts            |  24 +++
 .../DashboardPage/CoursewareDisplay/types.ts  |  23 +++
 3 files changed, 157 insertions(+), 57 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 58ea771fae..71a62a68e6 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -21,8 +21,8 @@ import {
 import { DashboardCard } from "./DashboardCard"
 import {
   DashboardCourse,
-  DashboardCourseEnrollment,
   DashboardProgram,
+  DashboardProgramRequirement,
   EnrollmentStatus,
 } from "./types"
 import type { AxiosError } from "axios"
@@ -215,6 +215,39 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   )
 }
 
+const extractCoursesFromNode = (
+  node: DashboardProgramRequirement,
+): number[] => {
+  const courses: number[] = []
+
+  if (node.data.nodeType === "course" && node.data.course) {
+    courses.push(node.data.course)
+  }
+
+  if (node.children) {
+    node.children.forEach((child) => {
+      courses.push(...extractCoursesFromNode(child))
+    })
+  }
+
+  return courses
+}
+
+const getRequirementSectionTitle = (
+  node: DashboardProgramRequirement,
+): string => {
+  if (node.data.title) {
+    return node.data.title
+  }
+  if (node.data.electiveFlag) {
+    if (node.data.operator === "min_number_of" && node.data.operatorValue) {
+      return `Electives (Complete ${node.data.operatorValue})`
+    }
+    return "Elective Courses"
+  }
+  return "Core Courses"
+}
+
 interface ProgramEnrollmentDisplayProps {
   programId: number
 }
@@ -232,31 +265,39 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
   const program = rawProgram ? mitxonlineProgram(rawProgram) : undefined
   const { data: rawProgramCourses, isLoading: programCoursesLoading } =
     useQuery(coursesQueries.coursesList({ id: program?.courseIds }))
-  const programCourses = rawProgramCourses?.results.map((course) => {
-    const enrollment = userCourses?.find((dashboardCourse) =>
-      course.courseruns.some(
-        (run) => run.courseware_id === dashboardCourse.coursewareId,
-      ),
-    )?.enrollment
-    return mitxonlineCourse(course, enrollment)
-  })
-  const rawProgramCourseEnrollments = userCourses?.filter((course) => {
-    return rawProgramCourses?.results.some((programCourse) =>
-      programCourse.courseruns.some(
-        (run) => run.courseware_id === course.coursewareId,
-      ),
-    )
-  })
-  const programCourseEnrollments = rawProgramCourseEnrollments
-    ?.map((course) => {
-      return course.enrollment ?? undefined
-    })
-    .filter(
-      (enrollment) => enrollment !== undefined,
-    ) as DashboardCourseEnrollment[]
-  const completedEnrollments = programCourseEnrollments?.filter(
-    (enrollment) => enrollment.status === EnrollmentStatus.Completed,
+
+  // Build sections from requirement tree
+  const requirementSections =
+    program?.reqTree
+      .filter((node) => node.data.nodeType === "operator")
+      .map((node) => {
+        const courseIds = extractCoursesFromNode(node)
+        const sectionCourses = rawProgramCourses?.results
+          .filter((course) => courseIds.includes(course.id))
+          .map((course) => {
+            const enrollment = userCourses?.find((dashboardCourse) =>
+              course.courseruns.some(
+                (run) => run.courseware_id === dashboardCourse.coursewareId,
+              ),
+            )?.enrollment
+            return mitxonlineCourse(course, enrollment)
+          })
+
+        return {
+          title: getRequirementSectionTitle(node),
+          courses: sectionCourses || [],
+          node,
+        }
+      })
+      .filter((section) => section.courses.length > 0) || []
+
+  const allProgramCourses = requirementSections.flatMap(
+    (section) => section.courses,
   )
+  const completedCount = allProgramCourses.filter(
+    (course) => course.enrollment?.status === EnrollmentStatus.Completed,
+  ).length
+  const totalCount = allProgramCourses.length
   return (
     <>
       <Stack direction="column">
@@ -271,42 +312,54 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
             You have completed
             <Typography component="span" variant="subtitle2">
               {" "}
-              {completedEnrollments?.length} of {programCourses?.length} courses{" "}
+              {completedCount} of {totalCount} courses{" "}
             </Typography>
             for this program.
           </Typography>
         </Stack>
-        <Stack
-          direction="row"
-          justifyContent="space-between"
-          marginBottom="16px"
-        >
-          <Typography variant="subtitle2" color={theme.custom.colors.red}>
-            Core Courses
-          </Typography>
-          <Typography
-            variant="body2"
-            color={theme.custom.colors.silverGrayDark}
-          >
-            Completed {completedEnrollments?.length} of {programCourses?.length}
-          </Typography>
-        </Stack>
-        <StackedCardContainer>
-          {programCourses?.map((course) => (
-            <DashboardCardStyled
-              titleAction="marketing"
-              key={course.key}
-              dashboardResource={course}
-              showNotComplete={false}
-              variant="stacked"
-              isLoading={
-                userEnrollmentsLoading ||
-                programLoading ||
-                programCoursesLoading
-              }
-            />
-          ))}
-        </StackedCardContainer>
+        {requirementSections.map((section, index) => {
+          const sectionCompletedCount = section.courses.filter(
+            (course) =>
+              course.enrollment?.status === EnrollmentStatus.Completed,
+          ).length
+
+          return (
+            <React.Fragment key={index}>
+              <Stack
+                direction="row"
+                justifyContent="space-between"
+                marginBottom="16px"
+                marginTop={index > 0 ? "32px" : "0"}
+              >
+                <Typography variant="subtitle2" color={theme.custom.colors.red}>
+                  {section.title}
+                </Typography>
+                <Typography
+                  variant="body2"
+                  color={theme.custom.colors.silverGrayDark}
+                >
+                  Completed {sectionCompletedCount} of {section.courses.length}
+                </Typography>
+              </Stack>
+              <StackedCardContainer>
+                {section.courses.map((course) => (
+                  <DashboardCardStyled
+                    titleAction="marketing"
+                    key={course.key}
+                    dashboardResource={course}
+                    showNotComplete={false}
+                    variant="stacked"
+                    isLoading={
+                      userEnrollmentsLoading ||
+                      programLoading ||
+                      programCoursesLoading
+                    }
+                  />
+                ))}
+              </StackedCardContainer>
+            </React.Fragment>
+          )
+        })}
       </Stack>
     </>
   )
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index 64d02fe09f..166a1dc251 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -10,6 +10,7 @@ import {
   CourseWithCourseRunsSerializerV2,
   V2Program,
   V2ProgramCollection,
+  V2ProgramRequirement,
   V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 
@@ -21,6 +22,7 @@ import type {
   DashboardCourseEnrollment,
   DashboardProgramEnrollment,
   DashboardProgram,
+  DashboardProgramRequirement,
   DashboardProgramCollection,
 } from "./types"
 import { groupBy } from "lodash"
@@ -281,6 +283,26 @@ const programEnrollmentsToPrograms = (
   })
 }
 
+const transformProgramRequirement = (
+  raw: V2ProgramRequirement,
+): DashboardProgramRequirement => {
+  return {
+    id: raw.id,
+    data: {
+      nodeType: raw.data
+        .node_type as DashboardProgramRequirement["data"]["nodeType"],
+      course: raw.data.course,
+      program: raw.data.program,
+      requiredProgram: raw.data.required_program,
+      title: raw.data.title,
+      operator: raw.data.operator,
+      operatorValue: raw.data.operator_value,
+      electiveFlag: raw.data.elective_flag,
+    },
+    children: raw.children?.map(transformProgramRequirement),
+  }
+}
+
 const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
   return {
     id: raw.id,
@@ -295,6 +317,7 @@ const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
     courseIds: raw.courses,
     collections: raw.collections,
     description: raw.page.description,
+    reqTree: raw.req_tree.map(transformProgramRequirement),
   }
 }
 
@@ -330,6 +353,7 @@ export {
   userEnrollmentsToDashboardCourses,
   transformEnrollmentToDashboard,
   transformProgramEnrollmentToDashboard,
+  transformProgramRequirement,
   mitxonlineOrgContract,
   enrollmentsToOrgDashboardEnrollments,
   organizationCoursesWithContracts,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
index 86dfc0d2fb..5dc0b80a85 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -73,6 +73,25 @@ type DashboardProgramEnrollment = {
   }
 }
 
+type DashboardProgramRequirementNodeType = "course" | "program" | "operator"
+
+type DashboardProgramRequirementData = {
+  nodeType: DashboardProgramRequirementNodeType
+  course?: number | null
+  program?: number | null
+  requiredProgram?: number | null
+  title?: string | null
+  operator?: string | null
+  operatorValue?: string | null
+  electiveFlag?: boolean | null
+}
+
+type DashboardProgramRequirement = {
+  id?: number | null
+  data: DashboardProgramRequirementData
+  children?: DashboardProgramRequirement[]
+}
+
 type DashboardProgram = {
   id: number
   key: string
@@ -83,6 +102,7 @@ type DashboardProgram = {
   collections: number[]
   description: string
   enrollment?: DashboardProgramEnrollment
+  reqTree: DashboardProgramRequirement[]
 }
 
 type DashboardProgramCollection = {
@@ -112,6 +132,9 @@ export type {
   DashboardCourseEnrollment,
   DashboardProgramEnrollment,
   DashboardProgram,
+  DashboardProgramRequirement,
+  DashboardProgramRequirementData,
+  DashboardProgramRequirementNodeType,
   DashboardProgramCollection,
   DashboardProgramCollectionProgram,
 }

From 6c0716571e1d85b92d8b4be744cf1b24f4258ea9 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 21:51:07 -0500
Subject: [PATCH 10/26] fix tests

---
 frontends/api/src/mitxonline/test-utils/urls.ts               | 1 +
 .../DashboardPage/CoursewareDisplay/DashboardCard.test.tsx    | 4 ++--
 .../DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx | 4 ++++
 .../CoursewareDisplay/EnrollmentDisplay.test.tsx              | 4 ++++
 .../app-pages/DashboardPage/CoursewareDisplay/test-utils.ts   | 4 ++++
 .../main/src/app-pages/DashboardPage/HomeContent.test.tsx     | 4 ++++
 .../src/app-pages/DashboardPage/OrganizationContent.test.tsx  | 4 ++++
 7 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/frontends/api/src/mitxonline/test-utils/urls.ts b/frontends/api/src/mitxonline/test-utils/urls.ts
index b8d08e6985..6cd42e74e0 100644
--- a/frontends/api/src/mitxonline/test-utils/urls.ts
+++ b/frontends/api/src/mitxonline/test-utils/urls.ts
@@ -26,6 +26,7 @@ const enrollment = {
 
 const programEnrollments = {
   enrollmentsList: () => `${API_BASE_URL}/api/v1/program_enrollments/`,
+  enrollmentsListV2: () => `${API_BASE_URL}/api/v2/program_enrollments/`,
 }
 
 const b2b = {
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 ec993bd752..a17f1009f6 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -221,7 +221,7 @@ describe.each([
       view.rerender(
         <DashboardCard
           titleAction="marketing"
-          courseNoun={courseNoun}
+          noun={courseNoun}
           dashboardResource={course}
         />,
       )
@@ -236,7 +236,7 @@ describe.each([
           `${expected.label} ${courseNoun}`,
         )
       } else {
-        // "Continue" doesn't use courseNoun
+        // "Continue" doesn't use noun
         expect(coursewareCTA).toHaveTextContent(expected.label)
       }
     },
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
index b4647bcf00..207422a1fe 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
@@ -40,6 +40,10 @@ describe("DashboardDialogs", () => {
       mitxonline.urls.enrollment.enrollmentsListV2(),
       enrollments,
     )
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
 
     return { enrollments, completed, expired, started, notStarted }
   }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 71d9424fb3..32af05a874 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -28,6 +28,10 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.enrollment.enrollmentsListV2(),
       enrollments,
     )
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
 
     return { enrollments, completed, expired, started, notStarted }
   }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
index b80ef7d733..b61fafb1ca 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -267,6 +267,10 @@ function setupOrgDashboardMocks(
   // Empty defaults
   setMockResponse.get(mitxonline.urls.enrollment.enrollmentsList(), [])
   setMockResponse.get(mitxonline.urls.programEnrollments.enrollmentsList(), [])
+  setMockResponse.get(
+    mitxonline.urls.programEnrollments.enrollmentsListV2(),
+    [],
+  )
   setMockResponse.get(mitxonline.urls.contracts.contractsList(), contracts)
   setMockResponse.get(
     mitxonline.urls.programCollections.programCollectionsList(),
diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
index ec9bf9df29..c944407d05 100644
--- a/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
@@ -126,6 +126,10 @@ describe("HomeContent", () => {
 
     setMockResponse.get(urls.userLists.membershipList(), [])
     setMockResponse.get(urls.learningPaths.membershipList(), [])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
     return { resources }
   }
 
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
index bf55189e88..4e5557c498 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
@@ -33,6 +33,7 @@ describe("OrganizationContent", () => {
     setMockResponse.get(urls.enrollment.enrollmentsList(), [])
     setMockResponse.get(urls.enrollment.enrollmentsListV2(), [])
     setMockResponse.get(urls.programEnrollments.enrollmentsList(), [])
+    setMockResponse.get(urls.programEnrollments.enrollmentsListV2(), [])
     setMockResponse.get(urls.contracts.contractsList(), [])
   })
 
@@ -450,6 +451,9 @@ describe("OrganizationContent", () => {
     setMockResponse.get(urls.programEnrollments.enrollmentsList(), [
       programEnrollment,
     ])
+    setMockResponse.get(urls.programEnrollments.enrollmentsListV2(), [
+      programEnrollment,
+    ])
 
     renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)
 

From 223a4f0f4c25d2139e673ee023b29efe7c555427 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 23:22:22 -0500
Subject: [PATCH 11/26] set up non-b2b course card click handler for enrolling

---
 env/frontend.env                              |  1 +
 frontends/jest-shared-setup.ts                |  1 +
 .../CoursewareDisplay/DashboardCard.test.tsx  | 24 ++++-
 .../CoursewareDisplay/DashboardCard.tsx       | 95 +++++++++++++++----
 .../DashboardDialogs.test.tsx                 |  5 +-
 .../CoursewareDisplay/test-utils.ts           |  1 +
 .../CoursewareDisplay/transform.test.tsx      |  1 +
 .../CoursewareDisplay/transform.ts            |  3 +
 .../DashboardPage/CoursewareDisplay/types.ts  |  1 +
 9 files changed, 111 insertions(+), 21 deletions(-)

diff --git a/env/frontend.env b/env/frontend.env
index 221c74cfdb..d26f43758d 100644
--- a/env/frontend.env
+++ b/env/frontend.env
@@ -25,4 +25,5 @@ NEXT_PUBLIC_LEARN_AI_RECOMMENDATION_ENDPOINT=https://api.rc.learn.mit.edu/ai/htt
 NEXT_PUBLIC_LEARN_AI_SYLLABUS_ENDPOINT=https://api.rc.learn.mit.edu/ai/http/syllabus_agent/
 
 NEXT_PUBLIC_MITX_ONLINE_BASE_URL=${MITX_ONLINE_BASE_URL}
+NEXT_PUBLIC_MITX_ONLINE_DOMAIN=${MITX_ONLINE_DOMAIN}
 NEXT_PUBLIC_VERSION="local-dev"
diff --git a/frontends/jest-shared-setup.ts b/frontends/jest-shared-setup.ts
index adeb42c2a5..d8aa9d2685 100644
--- a/frontends/jest-shared-setup.ts
+++ b/frontends/jest-shared-setup.ts
@@ -12,6 +12,7 @@ process.env.NEXT_PUBLIC_MITOL_API_BASE_URL =
   "http://api.test.learn.odl.local:8063"
 process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL =
   "http://api.test.mitxonline.odl.local:8053"
+process.env.NEXT_PUBLIC_MITX_ONLINE_DOMAIN = "mitxonline.mit.edu"
 process.env.NEXT_PUBLIC_ORIGIN = "http://test.learn.odl.local:8062"
 process.env.NEXT_PUBLIC_EMBEDLY_KEY = "fake-embedly-key"
 
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 a17f1009f6..8fe9e58c1f 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -137,12 +137,22 @@ describe.each([
 
   test.each([
     {
-      course: pastDashboardCourse(),
+      course: pastDashboardCourse({
+        enrollment: {
+          status: EnrollmentStatus.Enrolled,
+          mode: EnrollmentMode.Audit,
+        },
+      }),
       expected: { enabled: true },
       case: "past",
     },
     {
-      course: currentDashboardCourse(),
+      course: currentDashboardCourse({
+        enrollment: {
+          status: EnrollmentStatus.Enrolled,
+          mode: EnrollmentMode.Audit,
+        },
+      }),
       expected: { enabled: true },
       case: "current",
     },
@@ -606,7 +616,10 @@ describe.each([
     async ({ trigger }) => {
       const userData = mitxUser()
       const course = dashboardCourse({
-        enrollment: { status: EnrollmentStatus.NotEnrolled },
+        enrollment: {
+          status: EnrollmentStatus.NotEnrolled,
+          b2b_contract_id: faker.number.int(),
+        },
       })
       const { enrollmentUrl } = setupEnrollmentApis({ user: userData, course })
       renderWithProviders(
@@ -635,7 +648,10 @@ describe.each([
     "Enrollment for complete profile bypasses just-in-time dialog",
     async ({ trigger, userData }) => {
       const course = dashboardCourse({
-        enrollment: { status: EnrollmentStatus.NotEnrolled },
+        enrollment: {
+          status: EnrollmentStatus.NotEnrolled,
+          b2b_contract_id: faker.number.int(),
+        },
       })
       setupEnrollmentApis({ user: userData, course })
       renderWithProviders(
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 9e95f65ef1..26369fde34 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -9,6 +9,8 @@ import {
   LoadingSpinner,
 } from "ol-components"
 import NextLink from "next/link"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import { FeatureFlags } from "@/common/feature_flags"
 import {
   EnrollmentStatus,
   EnrollmentMode,
@@ -211,6 +213,7 @@ const useOneClickEnroll = () => {
 
 type CoursewareButtonProps = {
   coursewareId?: string | null
+  readableId?: string | null
   startDate?: string | null
   endDate?: string | null
   enrollmentStatus?: EnrollmentStatus | null
@@ -218,6 +221,7 @@ type CoursewareButtonProps = {
   className?: string
   noun: string
   resourceType?: DashboardResourceType
+  b2bContractId?: number | null
   "data-testid"?: string
   onClick?: React.MouseEventHandler<HTMLButtonElement>
 }
@@ -255,6 +259,7 @@ const getCoursewareTextAndIcon = ({
 const CoursewareButton = styled(
   ({
     coursewareId,
+    readableId,
     startDate,
     endDate,
     enrollmentStatus,
@@ -262,6 +267,7 @@ const CoursewareButton = styled(
     className,
     noun,
     resourceType,
+    b2bContractId,
     onClick,
     ...others
   }: CoursewareButtonProps) => {
@@ -276,6 +282,9 @@ const CoursewareButton = styled(
       enrollmentStatus && enrollmentStatus !== EnrollmentStatus.NotEnrolled
 
     const oneClickEnroll = useOneClickEnroll()
+    const isProductPageCourseEnabled = useFeatureFlagEnabled(
+      FeatureFlags.ProductPageCourse,
+    )
 
     if (onClick) {
       return (
@@ -292,29 +301,80 @@ const CoursewareButton = styled(
     }
 
     if (!hasEnrolled /* enrollment flow */) {
+      // For B2B courses, use one-click enrollment
+      if (b2bContractId) {
+        return (
+          <Button
+            size="small"
+            variant="primary"
+            className={className}
+            disabled={oneClickEnroll.isPending || !coursewareId}
+            onClick={() => {
+              if (!href || !coursewareId) return
+              oneClickEnroll.mutate({ href, coursewareId })
+            }}
+            endIcon={
+              oneClickEnroll.isPending ? (
+                <LoadingSpinner
+                  color="inherit"
+                  loading={oneClickEnroll.isPending}
+                  size={16}
+                />
+              ) : undefined
+            }
+            {...others}
+          >
+            {coursewareText.text}
+          </Button>
+        )
+      }
+
+      // For non-B2B courses, redirect to course page or MITx Online product page
+      const enrollmentRedirectUrl = (() => {
+        if (!readableId) {
+          console.error("Cannot create enrollment URL: readableId is missing")
+          return null
+        }
+        if (isProductPageCourseEnabled) {
+          // Redirect to MIT Learn course page
+          return `/courses/${readableId}/`
+        } else {
+          // Redirect to MITx Online product page
+          const mitxOnlineDomain = process.env.NEXT_PUBLIC_MITX_ONLINE_DOMAIN
+          if (!mitxOnlineDomain) {
+            console.error(
+              "Cannot create enrollment URL: NEXT_PUBLIC_MITX_ONLINE_DOMAIN environment variable is not set",
+            )
+            return null
+          }
+          return `https://${mitxOnlineDomain}/courses/${readableId}/`
+        }
+      })()
+
+      if (!enrollmentRedirectUrl) {
+        return (
+          <Button
+            size="small"
+            variant="primary"
+            className={className}
+            disabled
+            {...others}
+          >
+            {coursewareText.text}
+          </Button>
+        )
+      }
+
       return (
-        <Button
+        <ButtonLink
           size="small"
           variant="primary"
           className={className}
-          disabled={oneClickEnroll.isPending || !coursewareId}
-          onClick={() => {
-            if (!href || !coursewareId) return
-            oneClickEnroll.mutate({ href, coursewareId })
-          }}
-          endIcon={
-            oneClickEnroll.isPending ? (
-              <LoadingSpinner
-                color="inherit"
-                loading={oneClickEnroll.isPending}
-                size={16}
-              />
-            ) : undefined
-          }
+          href={enrollmentRedirectUrl}
           {...others}
         >
           {coursewareText.text}
-        </Button>
+        </ButtonLink>
       )
     } else if (
       (hasStarted || !startDate) &&
@@ -502,6 +562,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   const enrollment = isCourse ? dashboardResource.enrollment : undefined
   const run = isCourse ? dashboardResource.run : undefined
   const coursewareId = isCourse ? dashboardResource.coursewareId : null
+  const readableId = isCourse ? dashboardResource.readableId : null
   const _resourceId = isProgram ? dashboardResource.id : undefined
 
   // Title link logic
@@ -580,12 +641,14 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
       <CoursewareButton
         data-testid="courseware-button"
         coursewareId={coursewareId}
+        readableId={readableId}
         startDate={run?.startDate}
         enrollmentStatus={enrollment?.status}
         href={buttonHref ?? run?.coursewareUrl}
         endDate={run?.endDate}
         noun={noun}
         resourceType={DashboardResourceType.Course}
+        b2bContractId={enrollment?.b2b_contract_id}
         onClick={buttonClick}
       />
     </>
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
index 207422a1fe..1a2d8ba991 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
@@ -203,7 +203,10 @@ describe("JustInTimeDialog", () => {
 
     // Setup course for enrollment
     const course = dashboardCourse({
-      enrollment: { status: EnrollmentStatus.NotEnrolled },
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+        b2b_contract_id: faker.number.int(),
+      },
       marketingUrl: "https://example.com/course",
     })
 
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
index b61fafb1ca..bb6571b5b9 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -32,6 +32,7 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
     {
       key: faker.string.uuid(),
       coursewareId: faker.string.uuid(),
+      readableId: `course-v1:${faker.string.alphanumeric(5)}+${faker.string.alphanumeric(5)}`,
       type: DashboardResourceType.Course,
       title: faker.commerce.productName(),
       marketingUrl: faker.internet.url(),
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
index c5e11daecf..e1d0e04587 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -41,6 +41,7 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       expect(transformed[0]).toEqual({
         key: `mitxonline-course-${apiData.run.course.id}-${apiData.run.id}`,
         coursewareId: apiData.run.courseware_id ?? null,
+        readableId: apiData.run.course.readable_id ?? null,
         type: DashboardResourceType.Course,
         title: apiData.run.title,
         marketingUrl: apiData.run.course.page?.page_url,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index 166a1dc251..0efbd502b7 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -57,6 +57,7 @@ const mitxonlineCourse = (
       runId: run?.id,
     }),
     coursewareId: run?.courseware_id ?? null,
+    readableId: raw.readable_id ?? null,
     type: DashboardResourceType.Course,
     title: raw.title,
     marketingUrl: raw.page?.page_url,
@@ -142,6 +143,7 @@ const userEnrollmentsToDashboardCourses = (
         runId: run.id,
       }),
       coursewareId: run?.courseware_id ?? null,
+      readableId: course.readable_id ?? null,
       type: DashboardResourceType.Course,
       title: course.title,
       marketingUrl: course.page?.page_url,
@@ -193,6 +195,7 @@ const createOrgUnenrolledCourse = (
       runId: run?.id,
     }),
     coursewareId: run?.courseware_id ?? null,
+    readableId: course.readable_id ?? null,
     type: DashboardResourceType.Course,
     title: course.title,
     marketingUrl: course.page?.page_url,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
index 5dc0b80a85..a068c24c61 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -35,6 +35,7 @@ type DashboardContract = {
 type DashboardCourse = {
   key: string
   coursewareId: string | null
+  readableId: string | null
   title: string
   type: typeof DashboardResourceType.Course
   run: {

From 352c30db84960503983b6f228ae97697ddad7d24 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 21 Nov 2025 23:44:38 -0500
Subject: [PATCH 12/26] fix typescript errors

---
 .../app-pages/DashboardPage/OrganizationContent.tsx    | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
index ec7516dcd5..4178b045b5 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.tsx
@@ -31,7 +31,7 @@ import {
   ContractPage,
   CourseRunEnrollmentRequestV2,
   OrganizationPage,
-  UserProgramEnrollmentDetail,
+  V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { ButtonLink } from "@mitodl/smoot-design"
@@ -307,7 +307,7 @@ const OrgProgramCollectionDisplay: React.FC<{
             Component="li"
             key={course.key}
             dashboardResource={course}
-            courseNoun="Module"
+            noun="Module"
             offerUpgrade={false}
             titleAction="courseware"
             buttonHref={course.run?.coursewareUrl}
@@ -322,7 +322,7 @@ const OrgProgramDisplay: React.FC<{
   program: DashboardProgram
   contracts?: ContractPage[]
   courseRunEnrollments?: CourseRunEnrollmentRequestV2[]
-  programEnrollments?: UserProgramEnrollmentDetail[]
+  programEnrollments?: V2UserProgramEnrollmentDetail[]
   programLoading: boolean
   orgId: number
 }> = ({
@@ -376,7 +376,7 @@ const OrgProgramDisplay: React.FC<{
             size="small"
             variant="bordered"
             startIcon={<RiAwardFill />}
-            href={programEnrollment?.certificate?.link}
+            href={`/certificate/program/${programEnrollment?.certificate?.uuid}/`}
           >
             View {program.programType} Certificate
           </ProgramCertificateButton>
@@ -388,7 +388,7 @@ const OrgProgramDisplay: React.FC<{
             Component="li"
             key={course.key}
             dashboardResource={course}
-            courseNoun="Module"
+            noun="Module"
             offerUpgrade={false}
             titleAction="courseware"
             buttonHref={course.run?.coursewareUrl}

From 478d73a751faec14750d9a386ef2fade6e5f40f0 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Sat, 22 Nov 2025 00:09:24 -0500
Subject: [PATCH 13/26] fix more tests

---
 .../test-utils/factories/enrollment.ts        | 40 ++++++++++++++++++-
 .../OrganizationContent.test.tsx              | 22 ++++++++--
 2 files changed, 57 insertions(+), 5 deletions(-)

diff --git a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
index 418cfdba1e..287edc70ad 100644
--- a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
+++ b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
@@ -6,6 +6,8 @@ import type {
   CourseRunEnrollmentRequestV2,
   CourseRunGrade,
   UserProgramEnrollmentDetail,
+  V2UserProgramEnrollmentDetail,
+  CertificatePageModel,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { UniqueEnforcer } from "enforce-unique"
 import { factories } from ".."
@@ -193,9 +195,45 @@ const programEnrollment: PartialFactory<UserProgramEnrollmentDetail> = (
   return mergeOverrides<UserProgramEnrollmentDetail>(defaults, overrides)
 }
 
+const programEnrollmentV2: PartialFactory<V2UserProgramEnrollmentDetail> = (
+  overrides = {},
+): V2UserProgramEnrollmentDetail => {
+  const program = factories.programs.program()
+  const hasCertificate = faker.datatype.boolean()
+  const defaults: V2UserProgramEnrollmentDetail = {
+    certificate: hasCertificate
+      ? {
+          uuid: faker.string.uuid(),
+          user: {
+            id: faker.number.int(),
+            username: faker.internet.username(),
+            name: faker.person.fullName(),
+            created_on: faker.date.past().toISOString(),
+            updated_on: faker.date.recent().toISOString(),
+          },
+          is_revoked: false,
+          certificate_page: {
+            id: faker.number.int(),
+          } as Partial<CertificatePageModel> as CertificatePageModel,
+          program: program,
+          certificate_page_revision: faker.number.int({ min: 1, max: 10 }),
+        }
+      : null,
+    program: program,
+    enrollments: [courseEnrollment()],
+  }
+  return mergeOverrides<V2UserProgramEnrollmentDetail>(defaults, overrides)
+}
+
 // Not paginated
 const courseEnrollments = (count: number): CourseRunEnrollmentRequestV2[] => {
   return new Array(count).fill(null).map(() => courseEnrollment())
 }
 
-export { courseEnrollment, courseEnrollments, grade, programEnrollment }
+export {
+  courseEnrollment,
+  courseEnrollments,
+  grade,
+  programEnrollment,
+  programEnrollmentV2,
+}
diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
index 4e5557c498..4be3366504 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
@@ -14,6 +14,7 @@ import {
   mitxonlineProgram,
   sortDashboardCourses,
 } from "./CoursewareDisplay/transform"
+import type { CertificatePageModel } from "@mitodl/mitxonline-api-axios/v2"
 import {
   createCoursesWithContractRuns,
   createEnrollmentsForContractRuns,
@@ -436,13 +437,26 @@ describe("OrganizationContent", () => {
       program_type: "Program", // Set specific program type
       certificate: {
         uuid: "cert-123",
-        url: "/certificates/program/1",
+        url: "/certificate/program/cert-123",
       },
     }
-    const programEnrollment = factories.enrollment.programEnrollment({
-      program: { id: programWithCertificate.id },
+    const programEnrollment = factories.enrollment.programEnrollmentV2({
+      program: programWithCertificate,
       certificate: {
-        link: programWithCertificate.certificate.url,
+        uuid: programWithCertificate.certificate.uuid,
+        user: {
+          id: 1,
+          username: "testuser",
+          name: "Test User",
+          created_on: new Date().toISOString(),
+          updated_on: new Date().toISOString(),
+        },
+        is_revoked: false,
+        certificate_page: {
+          id: 1,
+        } as Partial<CertificatePageModel> as CertificatePageModel,
+        program: programWithCertificate,
+        certificate_page_revision: 1,
       },
     })
     setMockResponse.get(urls.programs.programsList({ org_id: orgX.id }), {

From 2206a4d63b98c57ab9df8ac1acef46a41b89c23f Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Mon, 24 Nov 2025 16:55:29 -0500
Subject: [PATCH 14/26] add unit tests for new functionality and loading
 skeleton

---
 .../CoursewareDisplay/DashboardCard.test.tsx  |  88 +++-
 .../CoursewareDisplay/DashboardCard.tsx       |  14 +
 .../EnrollmentDisplay.test.tsx                | 395 ++++++++++++++++++
 .../CoursewareDisplay/test-utils.ts           |  24 +-
 .../CoursewareDisplay/transform.test.tsx      | 272 ++++++++++++
 .../DashboardPage/ProgramContent.test.tsx     |  46 ++
 .../app-pages/ProductPages/ProgramPage.tsx    |   4 +-
 7 files changed, 839 insertions(+), 4 deletions(-)
 create mode 100644 frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx

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 8fe9e58c1f..96fe1dd691 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -9,7 +9,7 @@ import {
 import * as mitxonline from "api/mitxonline-test-utils"
 import { mockAxiosInstance } from "api/test-utils"
 import { DashboardCard, getDefaultContextMenuItems } from "./DashboardCard"
-import { dashboardCourse } from "./test-utils"
+import { dashboardCourse, dashboardProgram } from "./test-utils"
 import { faker } from "@faker-js/faker/locale/en"
 import moment from "moment"
 import { EnrollmentMode, EnrollmentStatus } from "./types"
@@ -671,4 +671,90 @@ describe.each([
       )
     },
   )
+
+  describe("Stacked Variant", () => {
+    test("applies stacked variant styling", () => {
+      setupUserApis()
+      const course = dashboardCourse()
+      renderWithProviders(
+        <DashboardCard
+          variant="stacked"
+          titleAction="marketing"
+          dashboardResource={course}
+        />,
+      )
+
+      const card = getCard()
+      expect(card).toBeInTheDocument()
+      // Successfully renders a stacked card - the variant prop controls styling via styled-components
+    })
+
+    test("renders multiple stacked cards correctly", () => {
+      setupUserApis()
+      const courses = [
+        dashboardCourse({ title: "First Stacked Course" }),
+        dashboardCourse({ title: "Second Stacked Course" }),
+        dashboardCourse({ title: "Third Stacked Course" }),
+      ]
+
+      renderWithProviders(
+        <div>
+          {courses.map((course) => (
+            <DashboardCard
+              key={course.key}
+              variant="stacked"
+              titleAction="marketing"
+              dashboardResource={course}
+            />
+          ))}
+        </div>,
+      )
+
+      const allCards = screen.getAllByTestId(testId)
+      expect(allCards).toHaveLength(3)
+      expect(
+        within(allCards[0]).getByText("First Stacked Course"),
+      ).toBeInTheDocument()
+      expect(
+        within(allCards[1]).getByText("Second Stacked Course"),
+      ).toBeInTheDocument()
+      expect(
+        within(allCards[2]).getByText("Third Stacked Course"),
+      ).toBeInTheDocument()
+    })
+  })
+
+  describe("Program Cards", () => {
+    test("renders program card with title", () => {
+      setupUserApis()
+      const program = dashboardProgram({
+        title: "Test Program Title",
+      })
+
+      renderWithProviders(
+        <DashboardCard titleAction="marketing" dashboardResource={program} />,
+      )
+
+      const card = getCard()
+      expect(within(card).getByText("Test Program Title")).toBeInTheDocument()
+    })
+
+    test("program card does not show course-specific elements", () => {
+      setupUserApis()
+      const program = dashboardProgram({
+        title: "Test Program",
+      })
+
+      renderWithProviders(
+        <DashboardCard titleAction="marketing" dashboardResource={program} />,
+      )
+
+      const card = getCard()
+      // Programs don't show enrollment status or courseware buttons
+      expect(
+        within(card).queryByTestId("courseware-button"),
+      ).not.toBeInTheDocument()
+      expect(within(card).queryByTestId("upgrade-root")).not.toBeInTheDocument()
+    })
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 26369fde34..a680a92b14 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -286,6 +286,20 @@ const CoursewareButton = styled(
       FeatureFlags.ProductPageCourse,
     )
 
+    if (resourceType === DashboardResourceType.Program) {
+      return (
+        <ButtonLink
+          size="small"
+          variant="primary"
+          className={className}
+          href={href ?? undefined}
+          {...others}
+        >
+          {coursewareText.text}
+        </ButtonLink>
+      )
+    }
+
     if (onClick) {
       return (
         <Button
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 32af05a874..96872f1dc2 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { act, waitFor } from "@testing-library/react"
 import {
   renderWithProviders,
   screen,
@@ -104,4 +105,398 @@ describe("EnrollmentDisplay", () => {
 
     expect(screen.queryByText("Show all")).not.toBeInTheDocument()
   })
+
+  test("Renders program cards when program enrollments exist", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    const programEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "My Test Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    // Need at least one course enrollment to render the wrapper
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [
+      mitxonline.factories.enrollment.courseEnrollment({
+        b2b_contract_id: null,
+        run: {
+          ...mitxonline.factories.enrollment.courseEnrollment().run,
+          title: "Dummy Course",
+        },
+      }),
+    ])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [programEnrollment],
+    )
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    await screen.findByRole("heading", { name: "My Learning" })
+
+    // Program title appears twice (desktop + mobile)
+    const programCards = await screen.findAllByText("My Test Program")
+    expect(programCards.length).toBeGreaterThan(0)
+  })
+
+  test("Renders both course and program enrollments together", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    const courseEnrollment = mitxonline.factories.enrollment.courseEnrollment({
+      b2b_contract_id: null,
+      run: {
+        ...mitxonline.factories.enrollment.courseEnrollment().run,
+        course: {
+          ...mitxonline.factories.enrollment.courseEnrollment().run.course,
+          title: "My Test Course",
+        },
+      },
+    })
+    const programEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "My Test Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [
+      courseEnrollment,
+    ])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [programEnrollment],
+    )
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    await screen.findByRole("heading", { name: "My Learning" })
+
+    // Course title appears in desktop + mobile cards
+    expect(
+      (await screen.findAllByText("My Test Course")).length,
+    ).toBeGreaterThan(0)
+    // Program title appears in desktop + mobile cards
+    expect(
+      (await screen.findAllByText("My Test Program")).length,
+    ).toBeGreaterThan(0)
+  })
+
+  test("Shows empty state when no enrollments exist", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [],
+    )
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    // Wait a moment for queries to complete
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 100))
+    })
+
+    // Should not render the "My Learning" section when there are no enrollments
+    expect(
+      screen.queryByRole("heading", { name: "My Learning" }),
+    ).not.toBeInTheDocument()
+    const cards = screen.queryAllByTestId("enrollment-card-desktop")
+    expect(cards).toHaveLength(0)
+  })
+
+  test("Filters B2B program enrollments from display", async () => {
+    const mitxOnlineUser = mitxonline.factories.user.user()
+    setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+    const b2bProgramEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "B2B Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: 123,
+            b2b_organization_id: 456,
+          },
+        ],
+      })
+
+    const nonB2BProgramEnrollment =
+      mitxonline.factories.enrollment.programEnrollmentV2({
+        program: {
+          ...mitxonline.factories.programs.program(),
+          title: "Personal Program",
+        },
+        enrollments: [
+          {
+            ...mitxonline.factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+    // Need at least one course enrollment to render the wrapper
+    setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [
+      mitxonline.factories.enrollment.courseEnrollment({
+        b2b_contract_id: null,
+        run: {
+          ...mitxonline.factories.enrollment.courseEnrollment().run,
+          title: "Dummy Course",
+        },
+      }),
+    ])
+    setMockResponse.get(
+      mitxonline.urls.programEnrollments.enrollmentsListV2(),
+      [b2bProgramEnrollment, nonB2BProgramEnrollment],
+    )
+
+    renderWithProviders(<EnrollmentDisplay />)
+
+    await screen.findByRole("heading", { name: "My Learning" })
+
+    // Should only show the non-B2B program (appears in desktop + mobile cards)
+    const personalProgramCards = await screen.findAllByText("Personal Program")
+    expect(personalProgramCards.length).toBeGreaterThan(0)
+    expect(screen.queryByText("B2B Program")).not.toBeInTheDocument()
+  })
+
+  describe("ProgramId Filtering", () => {
+    test("Filters to single program when programId is provided", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 123,
+        title: "Target Program",
+        courses: [1, 2, 3],
+      })
+      const courses = mitxonline.factories.courses.courses({ count: 3 })
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(123), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+      // Also mock the undefined id case (when program data isn't loaded yet)
+      setMockResponse.get(mitxonline.urls.courses.coursesList({}), {
+        results: [],
+      })
+
+      renderWithProviders(<EnrollmentDisplay programId={123} />)
+
+      await screen.findByText("Target Program")
+      expect(screen.getByText("Target Program")).toBeInTheDocument()
+    })
+
+    test("Displays course requirements when programId is provided", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 456,
+        courses: [1], // Only course 1 is in the requirements
+        req_tree: [
+          {
+            id: 1,
+            data: {
+              node_type: "operator",
+              operator: "all_of",
+              operator_value: "0",
+              elective_flag: false,
+              title: "Core Courses",
+              course: null,
+              program: null,
+              required_program: null,
+            },
+            children: [
+              {
+                id: 2,
+                data: {
+                  node_type: "course",
+                  course: 1,
+                  operator: null,
+                  operator_value: "0",
+                  elective_flag: false,
+                  title: null,
+                  program: null,
+                  required_program: null,
+                },
+                children: [],
+              },
+            ],
+          },
+        ],
+      })
+      const courses = {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [
+          mitxonline.factories.courses.course({
+            id: 1,
+            title: "Required Course 1",
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+        ],
+      }
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(456), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+      // Also mock the undefined id case (when program data isn't loaded yet)
+      setMockResponse.get(mitxonline.urls.courses.coursesList({}), {
+        results: [],
+      })
+
+      renderWithProviders(<EnrollmentDisplay programId={456} />)
+
+      // Wait for program data to load
+      await screen.findByText(/for this program/)
+
+      // Wait for requirement sections to appear
+      await waitFor(
+        () => {
+          const coreCourses = screen.queryByText("Core Courses")
+          expect(coreCourses).toBeInTheDocument()
+        },
+        { timeout: 2000 },
+      )
+    })
+
+    test("Shows enrollment status for program courses", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 789,
+        courses: [1],
+        req_tree: [
+          {
+            id: 1,
+            data: {
+              node_type: "operator",
+              operator: "all_of",
+              operator_value: "0",
+              elective_flag: false,
+              title: "Requirements",
+              course: null,
+              program: null,
+              required_program: null,
+            },
+            children: [
+              {
+                id: 2,
+                data: {
+                  node_type: "course",
+                  course: 1,
+                  operator: null,
+                  operator_value: "0",
+                  elective_flag: false,
+                  title: null,
+                  program: null,
+                  required_program: null,
+                },
+                children: [],
+              },
+            ],
+          },
+        ],
+      })
+
+      const courses = {
+        count: 1,
+        next: null,
+        previous: null,
+        results: [
+          mitxonline.factories.courses.course({
+            id: 1,
+            title: "Test Course",
+            page: {
+              page_url: "/courses/test-course/",
+            },
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+        ],
+      }
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(789), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+      // Also mock the undefined id case
+      setMockResponse.get(mitxonline.urls.courses.coursesList({}), {
+        results: [],
+      })
+
+      renderWithProviders(<EnrollmentDisplay programId={789} />)
+
+      // Wait for the section header to load
+      await screen.findByText("Requirements")
+
+      // Wait for the completion count to appear (this means courses have loaded)
+      await screen.findByText(/Completed 0 of 1/)
+
+      // Wait for loading to complete - check that skeleton is gone
+      await waitFor(
+        () => {
+          const skeletons = screen.queryAllByTestId("skeleton")
+          expect(skeletons).toHaveLength(0)
+        },
+        { timeout: 3000 },
+      )
+
+      // Now check for the title - there will be 2 (desktop and mobile)
+      const titles = screen.getAllByText("Test Course")
+      expect(titles.length).toBeGreaterThanOrEqual(1)
+    })
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
index bb6571b5b9..2f8d2f049a 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -5,7 +5,7 @@ import {
   EnrollmentMode,
   EnrollmentStatus,
 } from "./types"
-import type { DashboardCourse } from "./types"
+import type { DashboardCourse, DashboardProgram } from "./types"
 import * as u from "api/test-utils"
 import * as mitxonline from "api/mitxonline-test-utils"
 import { urls, factories } from "api/mitxonline-test-utils"
@@ -54,6 +54,27 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
   )
 }
 
+const dashboardProgram: PartialFactory<DashboardProgram> = (...overrides) => {
+  return mergeOverrides<DashboardProgram>(
+    {
+      id: faker.number.int(),
+      key: faker.string.uuid(),
+      type: DashboardResourceType.Program,
+      title: faker.commerce.productName(),
+      programType: faker.helpers.arrayElement([
+        "MicroMasters",
+        "Professional Certificate",
+        "XSeries",
+      ]),
+      courseIds: Array.from({ length: 3 }, () => faker.number.int()),
+      collections: [],
+      description: faker.lorem.paragraph(),
+      reqTree: [],
+    },
+    ...overrides,
+  )
+}
+
 const setupEnrollments = (includeExpired: boolean) => {
   const completed = [
     makeCourseEnrollment({
@@ -347,6 +368,7 @@ const createCoursesWithContractRuns = (contracts: ContractPage[]) => {
 
 export {
   dashboardCourse,
+  dashboardProgram,
   setupEnrollments,
   setupProgramsAndCourses,
   setupOrgAndUser,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
index e1d0e04587..23ba7e947b 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -10,6 +10,7 @@ import {
   createOrgUnenrolledCourse,
   transformEnrollmentToDashboard,
   filterEnrollmentsByOrganization,
+  programEnrollmentsToPrograms,
 } from "./transform"
 import {
   createCoursesWithContractRuns,
@@ -665,4 +666,275 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       expect(filtered[0].b2b_organization_id).toBe(123)
     })
   })
+
+  describe("mitxonlineProgram", () => {
+    test("transforms V2Program to DashboardProgram correctly", () => {
+      const program = factories.programs.program()
+      const result = mitxonlineProgram(program)
+
+      expect(result).toEqual({
+        id: program.id,
+        key: `mitxonline-program-${program.id}`,
+        type: DashboardResourceType.Program,
+        title: program.title,
+        programType: program.program_type,
+        courseIds: program.courses,
+        collections: program.collections,
+        description: program.page.description,
+        reqTree: expect.any(Array),
+      })
+    })
+
+    test("transforms requirement tree correctly", () => {
+      const program = factories.programs.program({
+        req_tree: [
+          {
+            id: 1,
+            data: {
+              node_type: "operator",
+              operator: "all_of",
+              operator_value: "0",
+              elective_flag: false,
+              title: "Required Courses",
+              course: null,
+              program: null,
+              required_program: null,
+            },
+            children: [
+              {
+                id: 2,
+                data: {
+                  node_type: "course",
+                  course: 123,
+                  operator: null,
+                  operator_value: "0",
+                  elective_flag: false,
+                  title: null,
+                  program: null,
+                  required_program: null,
+                },
+                children: [],
+              },
+            ],
+          },
+        ],
+      })
+      const result = mitxonlineProgram(program)
+
+      expect(result.reqTree).toHaveLength(1)
+      expect(result.reqTree[0]).toEqual({
+        id: 1,
+        data: {
+          nodeType: "operator",
+          operator: "all_of",
+          operatorValue: "0",
+          electiveFlag: false,
+          title: "Required Courses",
+          course: null,
+          program: null,
+          requiredProgram: null,
+        },
+        children: [
+          {
+            id: 2,
+            data: {
+              nodeType: "course",
+              course: 123,
+              operator: null,
+              operatorValue: "0",
+              electiveFlag: false,
+              title: null,
+              program: null,
+              requiredProgram: null,
+            },
+            children: [],
+          },
+        ],
+      })
+    })
+
+    test("handles program with empty reqTree", () => {
+      const program = factories.programs.program({ req_tree: [] })
+      const result = mitxonlineProgram(program)
+
+      expect(result.reqTree).toEqual([])
+    })
+
+    test("handles deeply nested requirement trees", () => {
+      const program = factories.programs.program({
+        req_tree: [
+          {
+            id: 1,
+            data: {
+              node_type: "operator",
+              operator: "all_of",
+              operator_value: "0",
+              elective_flag: false,
+              title: "Program Requirements",
+              course: null,
+              program: null,
+              required_program: null,
+            },
+            children: [
+              {
+                id: 2,
+                data: {
+                  node_type: "operator",
+                  operator: "min_number_of",
+                  operator_value: "2",
+                  elective_flag: true,
+                  title: "Electives",
+                  course: null,
+                  program: null,
+                  required_program: null,
+                },
+                children: [
+                  {
+                    id: 3,
+                    data: {
+                      node_type: "course",
+                      course: 456,
+                      operator: null,
+                      operator_value: "0",
+                      elective_flag: false,
+                      title: null,
+                      program: null,
+                      required_program: null,
+                    },
+                    children: [],
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      })
+      const result = mitxonlineProgram(program)
+
+      expect(result.reqTree[0].children).toHaveLength(1)
+      expect(result.reqTree[0].children?.[0].children).toHaveLength(1)
+      expect(result.reqTree[0].children?.[0].data.electiveFlag).toBe(true)
+    })
+  })
+
+  describe("programEnrollmentsToPrograms", () => {
+    test("filters out B2B program enrollments", () => {
+      const programEnrollments = [
+        factories.enrollment.programEnrollmentV2({
+          enrollments: [
+            {
+              ...factories.enrollment.courseEnrollment(),
+              b2b_contract_id: 123, // B2B enrollment
+              b2b_organization_id: 456,
+            },
+          ],
+        }),
+        factories.enrollment.programEnrollmentV2({
+          enrollments: [
+            {
+              ...factories.enrollment.courseEnrollment(),
+              b2b_contract_id: null, // Non-B2B enrollment
+              b2b_organization_id: null,
+            },
+          ],
+        }),
+      ]
+
+      const result = programEnrollmentsToPrograms(programEnrollments)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].type).toBe(DashboardResourceType.Program)
+    })
+
+    test("includes program enrollment data", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        certificate: {
+          uuid: "test-cert-uuid",
+        },
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result[0].enrollment).toEqual({
+        status: EnrollmentStatus.Enrolled,
+        certificate: {
+          uuid: "test-cert-uuid",
+          link: "/certificate/program/test-cert-uuid/",
+        },
+      })
+    })
+
+    test("handles programs with multiple enrollments", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result).toHaveLength(1)
+      expect(result[0].type).toBe(DashboardResourceType.Program)
+    })
+
+    test("filters out programs where ANY enrollment is B2B", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null, // Non-B2B
+            b2b_organization_id: null,
+          },
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: 123, // B2B
+            b2b_organization_id: 456,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result).toHaveLength(0)
+    })
+
+    test("handles empty program enrollments array", () => {
+      const result = programEnrollmentsToPrograms([])
+
+      expect(result).toEqual([])
+    })
+
+    test("handles program enrollment without certificate", () => {
+      const programEnrollment = factories.enrollment.programEnrollmentV2({
+        certificate: null,
+        enrollments: [
+          {
+            ...factories.enrollment.courseEnrollment(),
+            b2b_contract_id: null,
+            b2b_organization_id: null,
+          },
+        ],
+      })
+
+      const result = programEnrollmentsToPrograms([programEnrollment])
+
+      expect(result[0].enrollment?.certificate).toBeUndefined()
+    })
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx
new file mode 100644
index 0000000000..1d23b637d4
--- /dev/null
+++ b/frontends/main/src/app-pages/DashboardPage/ProgramContent.test.tsx
@@ -0,0 +1,46 @@
+import React from "react"
+import { renderWithProviders, screen } from "@/test-utils"
+import ProgramContent from "./ProgramContent"
+
+// Mock the EnrollmentDisplay component
+jest.mock("./CoursewareDisplay/EnrollmentDisplay", () => ({
+  EnrollmentDisplay: jest.fn(({ programId }) => (
+    <div data-testid="enrollment-display" data-program-id={programId}>
+      Mocked EnrollmentDisplay with programId: {programId}
+    </div>
+  )),
+}))
+
+describe("ProgramContent", () => {
+  test("renders EnrollmentDisplay with programId prop", () => {
+    const programId = 123
+    renderWithProviders(<ProgramContent programId={programId} />)
+
+    const enrollmentDisplay = screen.getByTestId("enrollment-display")
+    expect(enrollmentDisplay).toBeInTheDocument()
+    expect(enrollmentDisplay).toHaveAttribute("data-program-id", "123")
+  })
+
+  test("passes correct programId to EnrollmentDisplay", () => {
+    const programId = 456
+    renderWithProviders(<ProgramContent programId={programId} />)
+
+    expect(
+      screen.getByText(`Mocked EnrollmentDisplay with programId: ${programId}`),
+    ).toBeInTheDocument()
+  })
+
+  test("handles different programId values", () => {
+    const { view } = renderWithProviders(<ProgramContent programId={1} />)
+    expect(screen.getByTestId("enrollment-display")).toHaveAttribute(
+      "data-program-id",
+      "1",
+    )
+
+    view.rerender(<ProgramContent programId={999} />)
+    expect(screen.getByTestId("enrollment-display")).toHaveAttribute(
+      "data-program-id",
+      "999",
+    )
+  })
+})
diff --git a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
index a3b676d7f5..d2dcd8db06 100644
--- a/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
+++ b/frontends/main/src/app-pages/ProductPages/ProgramPage.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import React from "react"
-import { Stack, Typography } from "ol-components"
+import { Skeleton, Stack, Typography } from "ol-components"
 
 import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { useQuery } from "@tanstack/react-query"
@@ -103,7 +103,7 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
     if (!isLoading) {
       return notFound()
     } else {
-      return null
+      return <Skeleton width="100%" height="100px" />
     }
   }
 

From 42dbb65a9d2f1718b78803a840794a43fc353a06 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Mon, 24 Nov 2025 17:12:18 -0500
Subject: [PATCH 15/26] fix typescript problem

---
 .../mitxonline/test-utils/factories/enrollment.ts | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
index 287edc70ad..aac16f82f6 100644
--- a/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
+++ b/frontends/api/src/mitxonline/test-utils/factories/enrollment.ts
@@ -7,7 +7,6 @@ import type {
   CourseRunGrade,
   UserProgramEnrollmentDetail,
   V2UserProgramEnrollmentDetail,
-  CertificatePageModel,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { UniqueEnforcer } from "enforce-unique"
 import { factories } from ".."
@@ -204,19 +203,7 @@ const programEnrollmentV2: PartialFactory<V2UserProgramEnrollmentDetail> = (
     certificate: hasCertificate
       ? {
           uuid: faker.string.uuid(),
-          user: {
-            id: faker.number.int(),
-            username: faker.internet.username(),
-            name: faker.person.fullName(),
-            created_on: faker.date.past().toISOString(),
-            updated_on: faker.date.recent().toISOString(),
-          },
-          is_revoked: false,
-          certificate_page: {
-            id: faker.number.int(),
-          } as Partial<CertificatePageModel> as CertificatePageModel,
-          program: program,
-          certificate_page_revision: faker.number.int({ min: 1, max: 10 }),
+          link: `/certificate/program/${faker.string.uuid()}/`,
         }
       : null,
     program: program,

From f9f6e8fcd010d33ecc90d099375ceb23d16fa3bd Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Mon, 24 Nov 2025 18:30:31 -0500
Subject: [PATCH 16/26] no-op enrollment in non-b2b courses for now

---
 env/frontend.env                              |  1 -
 .../CoursewareDisplay/DashboardCard.test.tsx  | 12 ++-
 .../CoursewareDisplay/DashboardCard.tsx       | 76 ++++++-------------
 .../DashboardDialogs.test.tsx                 |  6 +-
 .../CoursewareDisplay/test-utils.ts           |  1 +
 .../CoursewareDisplay/transform.ts            |  1 +
 .../DashboardPage/CoursewareDisplay/types.ts  |  1 +
 7 files changed, 42 insertions(+), 56 deletions(-)

diff --git a/env/frontend.env b/env/frontend.env
index d26f43758d..221c74cfdb 100644
--- a/env/frontend.env
+++ b/env/frontend.env
@@ -25,5 +25,4 @@ NEXT_PUBLIC_LEARN_AI_RECOMMENDATION_ENDPOINT=https://api.rc.learn.mit.edu/ai/htt
 NEXT_PUBLIC_LEARN_AI_SYLLABUS_ENDPOINT=https://api.rc.learn.mit.edu/ai/http/syllabus_agent/
 
 NEXT_PUBLIC_MITX_ONLINE_BASE_URL=${MITX_ONLINE_BASE_URL}
-NEXT_PUBLIC_MITX_ONLINE_DOMAIN=${MITX_ONLINE_DOMAIN}
 NEXT_PUBLIC_VERSION="local-dev"
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 96fe1dd691..ad7066f782 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -615,10 +615,14 @@ describe.each([
     "Enrollment for complete profile bypasses just-in-time dialog",
     async ({ trigger }) => {
       const userData = mitxUser()
+      const b2bContractId = faker.number.int()
       const course = dashboardCourse({
         enrollment: {
           status: EnrollmentStatus.NotEnrolled,
-          b2b_contract_id: faker.number.int(),
+          b2b_contract_id: b2bContractId,
+        },
+        run: {
+          b2bContractId: b2bContractId,
         },
       })
       const { enrollmentUrl } = setupEnrollmentApis({ user: userData, course })
@@ -647,10 +651,14 @@ describe.each([
   )(
     "Enrollment for complete profile bypasses just-in-time dialog",
     async ({ trigger, userData }) => {
+      const b2bContractId = faker.number.int()
       const course = dashboardCourse({
         enrollment: {
           status: EnrollmentStatus.NotEnrolled,
-          b2b_contract_id: faker.number.int(),
+          b2b_contract_id: b2bContractId,
+        },
+        run: {
+          b2bContractId: b2bContractId,
         },
       })
       setupEnrollmentApis({ user: userData, course })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index a680a92b14..4ddc265b0f 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -9,8 +9,6 @@ import {
   LoadingSpinner,
 } from "ol-components"
 import NextLink from "next/link"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { FeatureFlags } from "@/common/feature_flags"
 import {
   EnrollmentStatus,
   EnrollmentMode,
@@ -282,9 +280,6 @@ const CoursewareButton = styled(
       enrollmentStatus && enrollmentStatus !== EnrollmentStatus.NotEnrolled
 
     const oneClickEnroll = useOneClickEnroll()
-    const isProductPageCourseEnabled = useFeatureFlagEnabled(
-      FeatureFlags.ProductPageCourse,
-    )
 
     if (resourceType === DashboardResourceType.Program) {
       return (
@@ -343,52 +338,19 @@ const CoursewareButton = styled(
         )
       }
 
-      // For non-B2B courses, redirect to course page or MITx Online product page
-      const enrollmentRedirectUrl = (() => {
-        if (!readableId) {
-          console.error("Cannot create enrollment URL: readableId is missing")
-          return null
-        }
-        if (isProductPageCourseEnabled) {
-          // Redirect to MIT Learn course page
-          return `/courses/${readableId}/`
-        } else {
-          // Redirect to MITx Online product page
-          const mitxOnlineDomain = process.env.NEXT_PUBLIC_MITX_ONLINE_DOMAIN
-          if (!mitxOnlineDomain) {
-            console.error(
-              "Cannot create enrollment URL: NEXT_PUBLIC_MITX_ONLINE_DOMAIN environment variable is not set",
-            )
-            return null
-          }
-          return `https://${mitxOnlineDomain}/courses/${readableId}/`
-        }
-      })()
-
-      if (!enrollmentRedirectUrl) {
-        return (
-          <Button
-            size="small"
-            variant="primary"
-            className={className}
-            disabled
-            {...others}
-          >
-            {coursewareText.text}
-          </Button>
-        )
-      }
-
+      // For non-B2B courses, show alert
       return (
-        <ButtonLink
+        <Button
           size="small"
           variant="primary"
           className={className}
-          href={enrollmentRedirectUrl}
+          onClick={() =>
+            alert("Non-B2B course enrollment is not yet implemented.")
+          }
           {...others}
         >
           {coursewareText.text}
-        </ButtonLink>
+        </Button>
       )
     } else if (
       (hasStarted || !startDate) &&
@@ -577,7 +539,6 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   const run = isCourse ? dashboardResource.run : undefined
   const coursewareId = isCourse ? dashboardResource.coursewareId : null
   const readableId = isCourse ? dashboardResource.readableId : null
-  const _resourceId = isProgram ? dashboardResource.id : undefined
 
   // Title link logic
   const coursewareUrl = run?.coursewareUrl
@@ -590,15 +551,26 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
   const hasEnrolled =
     enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
 
+  const b2bContractId = enrollment?.b2b_contract_id ?? run?.b2bContractId
+
   const titleClick: React.MouseEventHandler | undefined =
-    isCourse && titleAction === "courseware" && coursewareUrl && !hasEnrolled
+    isCourse && !hasEnrolled
       ? (e) => {
           e.preventDefault()
-          if (!coursewareId) return
-          oneClickEnroll.mutate({
-            href: coursewareUrl,
-            coursewareId: coursewareId,
-          })
+          // B2B courses use one-click enrollment
+          if (b2bContractId) {
+            if (!coursewareId) return
+            const href =
+              titleAction === "courseware" ? coursewareUrl : coursewareUrl
+            if (!href) return
+            oneClickEnroll.mutate({
+              href: href,
+              coursewareId: coursewareId,
+            })
+          } else {
+            // Non-B2B courses will show a dialog in the future
+            alert("Non-B2B course enrollment is not yet implemented.")
+          }
         }
       : undefined
 
@@ -662,7 +634,7 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         endDate={run?.endDate}
         noun={noun}
         resourceType={DashboardResourceType.Course}
-        b2bContractId={enrollment?.b2b_contract_id}
+        b2bContractId={b2bContractId}
         onClick={buttonClick}
       />
     </>
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
index 1a2d8ba991..2a2b942581 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
@@ -202,10 +202,14 @@ describe("JustInTimeDialog", () => {
     setMockResponse.get(mitxonline.urls.countries.list(), countries)
 
     // Setup course for enrollment
+    const b2bContractId = faker.number.int()
     const course = dashboardCourse({
       enrollment: {
         status: EnrollmentStatus.NotEnrolled,
-        b2b_contract_id: faker.number.int(),
+        b2b_contract_id: b2bContractId,
+      },
+      run: {
+        b2bContractId: b2bContractId,
       },
       marketingUrl: "https://example.com/course",
     })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
index 2f8d2f049a..263a012594 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts
@@ -43,6 +43,7 @@ const dashboardCourse: PartialFactory<DashboardCourse> = (...overrides) => {
         certificateUpgradePrice: faker.commerce.price(),
         canUpgrade: true,
         coursewareUrl: faker.internet.url(),
+        b2bContractId: null,
       },
       enrollment: {
         id: faker.number.int(),
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index 0efbd502b7..83c1fb6baa 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -206,6 +206,7 @@ const createOrgUnenrolledCourse = (
       certificateUpgradePrice: run?.products[0]?.price,
       coursewareUrl: run?.courseware_url,
       canUpgrade: !!run?.is_upgradable,
+      b2bContractId: run?.b2b_contract ?? null,
     },
   }
 }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
index a068c24c61..0da1e946d9 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -45,6 +45,7 @@ type DashboardCourse = {
     certificateUpgradePrice?: string | null
     coursewareUrl?: string | null
     canUpgrade: boolean | undefined
+    b2bContractId?: number | null
     certificate?: {
       uuid: string
       link: string

From 123004b6369150306b311aa83a7b06cafca4515c Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Mon, 24 Nov 2025 19:06:54 -0500
Subject: [PATCH 17/26] don't set link on unenrolled non-B2B course cards

---
 .../CoursewareDisplay/DashboardCard.test.tsx  | 89 ++++++++++++++++++-
 .../CoursewareDisplay/DashboardCard.tsx       | 19 ++--
 2 files changed, 99 insertions(+), 9 deletions(-)

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 ad7066f782..a603a25193 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.test.tsx
@@ -80,10 +80,13 @@ describe.each([
     })
   })
 
-  test("It shows course title and links to marketingUrl if titleAction is marketing", async () => {
+  test("It shows course title and links to marketingUrl if titleAction is marketing and enrolled", async () => {
     setupUserApis()
     const course = dashboardCourse({
       marketingUrl: "?some-marketing-url",
+      enrollment: {
+        status: EnrollmentStatus.Enrolled,
+      },
     })
     renderWithProviders(
       <DashboardCard titleAction="marketing" dashboardResource={course} />,
@@ -97,15 +100,95 @@ describe.each([
     expect(courseLink).toHaveAttribute("href", course.marketingUrl)
   })
 
-  test("It shows course title and links to courseware if titleAction is courseware", async () => {
+  test("It shows course title as clickable text (not link) if titleAction is marketing and not enrolled (non-B2B)", async () => {
     setupUserApis()
-    const course = dashboardCourse()
+    const course = dashboardCourse({
+      marketingUrl: "?some-marketing-url",
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+      },
+      run: {
+        b2bContractId: null,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="marketing" dashboardResource={course} />,
+    )
+
+    const card = getCard()
+
+    // Should not be a link
+    expect(
+      within(card).queryByRole("link", { name: course.title }),
+    ).not.toBeInTheDocument()
+    // Should be clickable text
+    const titleText = within(card).getByText(course.title)
+    expect(titleText).toBeInTheDocument()
+  })
+
+  test("It shows course title and links to courseware if titleAction is courseware and enrolled", async () => {
+    setupUserApis()
+    const course = dashboardCourse({
+      enrollment: {
+        status: EnrollmentStatus.Enrolled,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="courseware" dashboardResource={course} />,
+    )
+
+    const card = getCard()
+
+    const courseLink = within(card).getByRole("link", {
+      name: course.title,
+    })
+    expect(courseLink).toHaveAttribute("href", course.run.coursewareUrl)
+  })
+
+  test("It shows course title as clickable text (not link) if titleAction is courseware and not enrolled (non-B2B)", async () => {
+    setupUserApis()
+    const course = dashboardCourse({
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+      },
+      run: {
+        b2bContractId: null,
+      },
+    })
+    renderWithProviders(
+      <DashboardCard titleAction="courseware" dashboardResource={course} />,
+    )
+
+    const card = getCard()
+
+    // Should not be a link
+    expect(
+      within(card).queryByRole("link", { name: course.title }),
+    ).not.toBeInTheDocument()
+    // Should be clickable text
+    const titleText = within(card).getByText(course.title)
+    expect(titleText).toBeInTheDocument()
+  })
+
+  test("It shows course title as link if not enrolled but has B2B contract", async () => {
+    setupUserApis()
+    const b2bContractId = faker.number.int()
+    const course = dashboardCourse({
+      enrollment: {
+        status: EnrollmentStatus.NotEnrolled,
+        b2b_contract_id: b2bContractId,
+      },
+      run: {
+        b2bContractId: b2bContractId,
+      },
+    })
     renderWithProviders(
       <DashboardCard titleAction="courseware" dashboardResource={course} />,
     )
 
     const card = getCard()
 
+    // Should be a link for B2B courses
     const courseLink = within(card).getByRole("link", {
       name: course.title,
     })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 4ddc265b0f..5edcde2056 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -542,17 +542,20 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
 
   // Title link logic
   const coursewareUrl = run?.coursewareUrl
-  const titleHref = isCourse
-    ? titleAction === "marketing"
-      ? marketingUrl
-      : (coursewareUrl ?? marketingUrl)
-    : undefined // Programs don't have a title link yet
-
   const hasEnrolled =
     enrollment?.status && enrollment.status !== EnrollmentStatus.NotEnrolled
 
   const b2bContractId = enrollment?.b2b_contract_id ?? run?.b2bContractId
 
+  // Title link logic - only set href for enrolled courses or B2B courses
+  const titleHref = isCourse
+    ? hasEnrolled || b2bContractId
+      ? titleAction === "marketing"
+        ? marketingUrl
+        : (coursewareUrl ?? marketingUrl)
+      : undefined
+    : undefined // Programs don't have a title link yet
+
   const titleClick: React.MouseEventHandler | undefined =
     isCourse && !hasEnrolled
       ? (e) => {
@@ -592,6 +595,10 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
         >
           {title}
         </TitleLink>
+      ) : titleClick ? (
+        <TitleText clickable onClick={titleClick}>
+          {title}
+        </TitleText>
       ) : (
         <TitleText>{title}</TitleText>
       )}

From 4c920ccced90fa5b9e5a5ad4fc5f03b7f6783ec0 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Mon, 24 Nov 2025 19:33:57 -0500
Subject: [PATCH 18/26] fix type errors

---
 .../DashboardPage/OrganizationContent.test.tsx    | 15 +--------------
 1 file changed, 1 insertion(+), 14 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
index 4be3366504..94e1bb3be2 100644
--- a/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx
@@ -14,7 +14,6 @@ import {
   mitxonlineProgram,
   sortDashboardCourses,
 } from "./CoursewareDisplay/transform"
-import type { CertificatePageModel } from "@mitodl/mitxonline-api-axios/v2"
 import {
   createCoursesWithContractRuns,
   createEnrollmentsForContractRuns,
@@ -444,19 +443,7 @@ describe("OrganizationContent", () => {
       program: programWithCertificate,
       certificate: {
         uuid: programWithCertificate.certificate.uuid,
-        user: {
-          id: 1,
-          username: "testuser",
-          name: "Test User",
-          created_on: new Date().toISOString(),
-          updated_on: new Date().toISOString(),
-        },
-        is_revoked: false,
-        certificate_page: {
-          id: 1,
-        } as Partial<CertificatePageModel> as CertificatePageModel,
-        program: programWithCertificate,
-        certificate_page_revision: 1,
+        link: programWithCertificate.certificate.url,
       },
     })
     setMockResponse.get(urls.programs.programsList({ org_id: orgX.id }), {

From b1c4eaad68a383d38e6ea19759a25a72d700db04 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Tue, 25 Nov 2025 12:04:27 -0500
Subject: [PATCH 19/26] simplify redundant ternary expression

---
 .../DashboardPage/CoursewareDisplay/DashboardCard.tsx      | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
index 5edcde2056..69860b36b8 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx
@@ -562,12 +562,9 @@ const DashboardCard: React.FC<DashboardCardProps> = ({
           e.preventDefault()
           // B2B courses use one-click enrollment
           if (b2bContractId) {
-            if (!coursewareId) return
-            const href =
-              titleAction === "courseware" ? coursewareUrl : coursewareUrl
-            if (!href) return
+            if (!coursewareId || !coursewareUrl) return
             oneClickEnroll.mutate({
-              href: href,
+              href: coursewareUrl,
               coursewareId: coursewareId,
             })
           } else {

From 1867cff23e89875d6d43125efa9ad388e01966af Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Tue, 25 Nov 2025 16:22:15 -0500
Subject: [PATCH 20/26] use req_tree directly

---
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 37 +++++++++----------
 .../CoursewareDisplay/transform.test.tsx      | 18 ++++-----
 .../CoursewareDisplay/transform.ts            | 25 +------------
 .../DashboardPage/CoursewareDisplay/types.ts  | 26 ++-----------
 4 files changed, 30 insertions(+), 76 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 71a62a68e6..6e4f864b41 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -19,15 +19,11 @@ import {
   userEnrollmentsToDashboardCourses,
 } from "./transform"
 import { DashboardCard } from "./DashboardCard"
-import {
-  DashboardCourse,
-  DashboardProgram,
-  DashboardProgramRequirement,
-  EnrollmentStatus,
-} from "./types"
+import { DashboardCourse, DashboardProgram, EnrollmentStatus } from "./types"
 import type { AxiosError } from "axios"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
 import { programsQueries } from "api/mitxonline-hooks/programs"
+import { V2ProgramRequirement } from "@mitodl/mitxonline-api-axios/v2"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -215,12 +211,10 @@ const EnrollmentExpandCollapse: React.FC<EnrollmentExpandCollapseProps> = ({
   )
 }
 
-const extractCoursesFromNode = (
-  node: DashboardProgramRequirement,
-): number[] => {
+const extractCoursesFromNode = (node: V2ProgramRequirement): number[] => {
   const courses: number[] = []
 
-  if (node.data.nodeType === "course" && node.data.course) {
+  if (node.data.node_type === "course" && node.data.course) {
     courses.push(node.data.course)
   }
 
@@ -233,15 +227,13 @@ const extractCoursesFromNode = (
   return courses
 }
 
-const getRequirementSectionTitle = (
-  node: DashboardProgramRequirement,
-): string => {
+const getRequirementSectionTitle = (node: V2ProgramRequirement): string => {
   if (node.data.title) {
     return node.data.title
   }
-  if (node.data.electiveFlag) {
-    if (node.data.operator === "min_number_of" && node.data.operatorValue) {
-      return `Electives (Complete ${node.data.operatorValue})`
+  if (node.data.elective_flag) {
+    if (node.data.operator === "min_number_of" && node.data.operator_value) {
+      return `Electives (Complete ${node.data.operator_value})`
     }
     return "Elective Courses"
   }
@@ -263,16 +255,21 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
     programsQueries.programDetail({ id: programId }),
   )
   const program = rawProgram ? mitxonlineProgram(rawProgram) : undefined
+
+  // Only fetch courses if we have a program with course IDs
   const { data: rawProgramCourses, isLoading: programCoursesLoading } =
-    useQuery(coursesQueries.coursesList({ id: program?.courseIds }))
+    useQuery({
+      ...coursesQueries.coursesList({ id: program?.courseIds || [] }),
+      enabled: !!program && program.courseIds.length > 0,
+    })
 
   // Build sections from requirement tree
   const requirementSections =
     program?.reqTree
-      .filter((node) => node.data.nodeType === "operator")
+      .filter((node) => node.data.node_type === "operator")
       .map((node) => {
         const courseIds = extractCoursesFromNode(node)
-        const sectionCourses = rawProgramCourses?.results
+        const sectionCourses = (rawProgramCourses?.results || [])
           .filter((course) => courseIds.includes(course.id))
           .map((course) => {
             const enrollment = userCourses?.find((dashboardCourse) =>
@@ -285,7 +282,7 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
 
         return {
           title: getRequirementSectionTitle(node),
-          courses: sectionCourses || [],
+          courses: sectionCourses,
           node,
         }
       })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
index 23ba7e947b..4f29fb75f7 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -725,27 +725,27 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       expect(result.reqTree[0]).toEqual({
         id: 1,
         data: {
-          nodeType: "operator",
+          node_type: "operator",
           operator: "all_of",
-          operatorValue: "0",
-          electiveFlag: false,
+          operator_value: "0",
+          elective_flag: false,
           title: "Required Courses",
           course: null,
           program: null,
-          requiredProgram: null,
+          required_program: null,
         },
         children: [
           {
             id: 2,
             data: {
-              nodeType: "course",
+              node_type: "course",
               course: 123,
               operator: null,
-              operatorValue: "0",
-              electiveFlag: false,
+              operator_value: "0",
+              elective_flag: false,
               title: null,
               program: null,
-              requiredProgram: null,
+              required_program: null,
             },
             children: [],
           },
@@ -813,7 +813,7 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
 
       expect(result.reqTree[0].children).toHaveLength(1)
       expect(result.reqTree[0].children?.[0].children).toHaveLength(1)
-      expect(result.reqTree[0].children?.[0].data.electiveFlag).toBe(true)
+      expect(result.reqTree[0].children?.[0].data.elective_flag).toBe(true)
     })
   })
 
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index 83c1fb6baa..69f83c6994 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -10,7 +10,6 @@ import {
   CourseWithCourseRunsSerializerV2,
   V2Program,
   V2ProgramCollection,
-  V2ProgramRequirement,
   V2UserProgramEnrollmentDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 
@@ -22,7 +21,6 @@ import type {
   DashboardCourseEnrollment,
   DashboardProgramEnrollment,
   DashboardProgram,
-  DashboardProgramRequirement,
   DashboardProgramCollection,
 } from "./types"
 import { groupBy } from "lodash"
@@ -287,26 +285,6 @@ const programEnrollmentsToPrograms = (
   })
 }
 
-const transformProgramRequirement = (
-  raw: V2ProgramRequirement,
-): DashboardProgramRequirement => {
-  return {
-    id: raw.id,
-    data: {
-      nodeType: raw.data
-        .node_type as DashboardProgramRequirement["data"]["nodeType"],
-      course: raw.data.course,
-      program: raw.data.program,
-      requiredProgram: raw.data.required_program,
-      title: raw.data.title,
-      operator: raw.data.operator,
-      operatorValue: raw.data.operator_value,
-      electiveFlag: raw.data.elective_flag,
-    },
-    children: raw.children?.map(transformProgramRequirement),
-  }
-}
-
 const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
   return {
     id: raw.id,
@@ -321,7 +299,7 @@ const mitxonlineProgram = (raw: V2Program): DashboardProgram => {
     courseIds: raw.courses,
     collections: raw.collections,
     description: raw.page.description,
-    reqTree: raw.req_tree.map(transformProgramRequirement),
+    reqTree: raw.req_tree,
   }
 }
 
@@ -357,7 +335,6 @@ export {
   userEnrollmentsToDashboardCourses,
   transformEnrollmentToDashboard,
   transformProgramEnrollmentToDashboard,
-  transformProgramRequirement,
   mitxonlineOrgContract,
   enrollmentsToOrgDashboardEnrollments,
   organizationCoursesWithContracts,
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
index 0da1e946d9..d3c9436c4e 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/types.ts
@@ -1,3 +1,5 @@
+import { V2ProgramRequirement } from "@mitodl/mitxonline-api-axios/v2"
+
 const DashboardResourceType = {
   Contract: "contract",
   Course: "course",
@@ -75,25 +77,6 @@ type DashboardProgramEnrollment = {
   }
 }
 
-type DashboardProgramRequirementNodeType = "course" | "program" | "operator"
-
-type DashboardProgramRequirementData = {
-  nodeType: DashboardProgramRequirementNodeType
-  course?: number | null
-  program?: number | null
-  requiredProgram?: number | null
-  title?: string | null
-  operator?: string | null
-  operatorValue?: string | null
-  electiveFlag?: boolean | null
-}
-
-type DashboardProgramRequirement = {
-  id?: number | null
-  data: DashboardProgramRequirementData
-  children?: DashboardProgramRequirement[]
-}
-
 type DashboardProgram = {
   id: number
   key: string
@@ -104,7 +87,7 @@ type DashboardProgram = {
   collections: number[]
   description: string
   enrollment?: DashboardProgramEnrollment
-  reqTree: DashboardProgramRequirement[]
+  reqTree: V2ProgramRequirement[]
 }
 
 type DashboardProgramCollection = {
@@ -134,9 +117,6 @@ export type {
   DashboardCourseEnrollment,
   DashboardProgramEnrollment,
   DashboardProgram,
-  DashboardProgramRequirement,
-  DashboardProgramRequirementData,
-  DashboardProgramRequirementNodeType,
   DashboardProgramCollection,
   DashboardProgramCollectionProgram,
 }

From 56a842f6de032b355241c238c36e2ab41c4b7e73 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Tue, 25 Nov 2025 16:32:16 -0500
Subject: [PATCH 21/26] remove unnecessary test var

---
 frontends/jest-shared-setup.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontends/jest-shared-setup.ts b/frontends/jest-shared-setup.ts
index d8aa9d2685..adeb42c2a5 100644
--- a/frontends/jest-shared-setup.ts
+++ b/frontends/jest-shared-setup.ts
@@ -12,7 +12,6 @@ process.env.NEXT_PUBLIC_MITOL_API_BASE_URL =
   "http://api.test.learn.odl.local:8063"
 process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL =
   "http://api.test.mitxonline.odl.local:8053"
-process.env.NEXT_PUBLIC_MITX_ONLINE_DOMAIN = "mitxonline.mit.edu"
 process.env.NEXT_PUBLIC_ORIGIN = "http://test.learn.odl.local:8062"
 process.env.NEXT_PUBLIC_EMBEDLY_KEY = "fake-embedly-key"
 

From f17ec36acf7c474c3b862cba961e0c2fb62f16ae Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Tue, 25 Nov 2025 16:47:23 -0500
Subject: [PATCH 22/26] respect operator in req_tree

---
 .../EnrollmentDisplay.test.tsx                | 99 +++++++++++++++++++
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 21 +++-
 2 files changed, 118 insertions(+), 2 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 96872f1dc2..7e4a12e007 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -498,5 +498,104 @@ describe("EnrollmentDisplay", () => {
       const titles = screen.getAllByText("Test Course")
       expect(titles.length).toBeGreaterThanOrEqual(1)
     })
+
+    test("Displays correct completion count for sections with min_number_of operator", async () => {
+      const mitxOnlineUser = mitxonline.factories.user.user()
+      setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
+
+      const program = mitxonline.factories.programs.program({
+        id: 999,
+        courses: [1, 2],
+        req_tree: [
+          {
+            id: 1,
+            data: {
+              node_type: "operator",
+              operator: "min_number_of",
+              operator_value: "1",
+              elective_flag: true,
+              title: "Electives",
+              course: null,
+              program: null,
+              required_program: null,
+            },
+            children: [
+              {
+                id: 2,
+                data: {
+                  node_type: "course",
+                  course: 1,
+                  operator: null,
+                  operator_value: "0",
+                  elective_flag: false,
+                  title: null,
+                  program: null,
+                  required_program: null,
+                },
+                children: [],
+              },
+              {
+                id: 3,
+                data: {
+                  node_type: "course",
+                  course: 2,
+                  operator: null,
+                  operator_value: "0",
+                  elective_flag: false,
+                  title: null,
+                  program: null,
+                  required_program: null,
+                },
+                children: [],
+              },
+            ],
+          },
+        ],
+      })
+
+      const courses = {
+        count: 2,
+        next: null,
+        previous: null,
+        results: [
+          mitxonline.factories.courses.course({
+            id: 1,
+            title: "Elective Course 1",
+            page: {
+              page_url: "/courses/elective-1/",
+            },
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+          mitxonline.factories.courses.course({
+            id: 2,
+            title: "Elective Course 2",
+            page: {
+              page_url: "/courses/elective-2/",
+            },
+            courseruns: [mitxonline.factories.courses.courseRun()],
+          }),
+        ],
+      }
+
+      mockedUseFeatureFlagEnabled.mockReturnValue(true)
+      setMockResponse.get(mitxonline.urls.enrollment.enrollmentsListV2(), [])
+      setMockResponse.get(
+        mitxonline.urls.programEnrollments.enrollmentsListV2(),
+        [],
+      )
+      setMockResponse.get(mitxonline.urls.programs.programDetail(999), program)
+      setMockResponse.get(
+        mitxonline.urls.courses.coursesList({ id: program.courses }),
+        courses,
+      )
+
+      renderWithProviders(<EnrollmentDisplay programId={999} />)
+
+      // Should show "0 of 1" not "0 of 2" since operator_value is "1"
+      await screen.findByText(/Completed 0 of 1/)
+
+      // Total for program should also be 1
+      await screen.findByText(/0 of 1 courses/)
+    })
   })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 6e4f864b41..1f0816909f 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -294,7 +294,18 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
   const completedCount = allProgramCourses.filter(
     (course) => course.enrollment?.status === EnrollmentStatus.Completed,
   ).length
-  const totalCount = allProgramCourses.length
+
+  // Calculate total required courses, respecting operator_value if operator is specified
+  const totalCount = requirementSections.reduce((sum, section) => {
+    if (
+      section.node.data.operator === "min_number_of" &&
+      section.node.data.operator_value
+    ) {
+      return sum + parseInt(section.node.data.operator_value, 10)
+    }
+    return sum + section.courses.length
+  }, 0)
+
   return (
     <>
       <Stack direction="column">
@@ -320,6 +331,12 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
               course.enrollment?.status === EnrollmentStatus.Completed,
           ).length
 
+          const sectionRequiredCount =
+            section.node.data.operator === "min_number_of" &&
+            section.node.data.operator_value
+              ? parseInt(section.node.data.operator_value, 10)
+              : section.courses.length
+
           return (
             <React.Fragment key={index}>
               <Stack
@@ -335,7 +352,7 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
                   variant="body2"
                   color={theme.custom.colors.silverGrayDark}
                 >
-                  Completed {sectionCompletedCount} of {section.courses.length}
+                  Completed {sectionCompletedCount} of {sectionRequiredCount}
                 </Typography>
               </Stack>
               <StackedCardContainer>

From 9523114b3d86ab6c90241dec96e7020ea8bd0e7f Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Tue, 25 Nov 2025 17:11:19 -0500
Subject: [PATCH 23/26] use requirementtreebuilder

---
 .../EnrollmentDisplay.test.tsx                | 136 ++++--------------
 .../CoursewareDisplay/transform.test.tsx      | 133 ++++-------------
 2 files changed, 56 insertions(+), 213 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 7e4a12e007..1c63082f52 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -326,40 +326,18 @@ describe("EnrollmentDisplay", () => {
       const mitxOnlineUser = mitxonline.factories.user.user()
       setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
 
+      const reqTree =
+        new mitxonline.factories.requirements.RequirementTreeBuilder()
+      const coreCourses = reqTree.addOperator({
+        operator: "all_of",
+        title: "Core Courses",
+      })
+      coreCourses.addCourse({ course: 1 })
+
       const program = mitxonline.factories.programs.program({
         id: 456,
         courses: [1], // Only course 1 is in the requirements
-        req_tree: [
-          {
-            id: 1,
-            data: {
-              node_type: "operator",
-              operator: "all_of",
-              operator_value: "0",
-              elective_flag: false,
-              title: "Core Courses",
-              course: null,
-              program: null,
-              required_program: null,
-            },
-            children: [
-              {
-                id: 2,
-                data: {
-                  node_type: "course",
-                  course: 1,
-                  operator: null,
-                  operator_value: "0",
-                  elective_flag: false,
-                  title: null,
-                  program: null,
-                  required_program: null,
-                },
-                children: [],
-              },
-            ],
-          },
-        ],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
       })
       const courses = {
         count: 1,
@@ -409,40 +387,18 @@ describe("EnrollmentDisplay", () => {
       const mitxOnlineUser = mitxonline.factories.user.user()
       setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
 
+      const reqTree =
+        new mitxonline.factories.requirements.RequirementTreeBuilder()
+      const requirements = reqTree.addOperator({
+        operator: "all_of",
+        title: "Requirements",
+      })
+      requirements.addCourse({ course: 1 })
+
       const program = mitxonline.factories.programs.program({
         id: 789,
         courses: [1],
-        req_tree: [
-          {
-            id: 1,
-            data: {
-              node_type: "operator",
-              operator: "all_of",
-              operator_value: "0",
-              elective_flag: false,
-              title: "Requirements",
-              course: null,
-              program: null,
-              required_program: null,
-            },
-            children: [
-              {
-                id: 2,
-                data: {
-                  node_type: "course",
-                  course: 1,
-                  operator: null,
-                  operator_value: "0",
-                  elective_flag: false,
-                  title: null,
-                  program: null,
-                  required_program: null,
-                },
-                children: [],
-              },
-            ],
-          },
-        ],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
       })
 
       const courses = {
@@ -503,54 +459,20 @@ describe("EnrollmentDisplay", () => {
       const mitxOnlineUser = mitxonline.factories.user.user()
       setMockResponse.get(mitxonline.urls.userMe.get(), mitxOnlineUser)
 
+      const reqTree =
+        new mitxonline.factories.requirements.RequirementTreeBuilder()
+      const electives = reqTree.addOperator({
+        operator: "min_number_of",
+        operator_value: "1",
+        title: "Electives",
+      })
+      electives.addCourse({ course: 1 })
+      electives.addCourse({ course: 2 })
+
       const program = mitxonline.factories.programs.program({
         id: 999,
         courses: [1, 2],
-        req_tree: [
-          {
-            id: 1,
-            data: {
-              node_type: "operator",
-              operator: "min_number_of",
-              operator_value: "1",
-              elective_flag: true,
-              title: "Electives",
-              course: null,
-              program: null,
-              required_program: null,
-            },
-            children: [
-              {
-                id: 2,
-                data: {
-                  node_type: "course",
-                  course: 1,
-                  operator: null,
-                  operator_value: "0",
-                  elective_flag: false,
-                  title: null,
-                  program: null,
-                  required_program: null,
-                },
-                children: [],
-              },
-              {
-                id: 3,
-                data: {
-                  node_type: "course",
-                  course: 2,
-                  operator: null,
-                  operator_value: "0",
-                  elective_flag: false,
-                  title: null,
-                  program: null,
-                  required_program: null,
-                },
-                children: [],
-              },
-            ],
-          },
-        ],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
       })
 
       const courses = {
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
index 4f29fb75f7..3ddf5d96ac 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -686,71 +686,25 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
     })
 
     test("transforms requirement tree correctly", () => {
+      const reqTree = new factories.requirements.RequirementTreeBuilder()
+      const required = reqTree.addOperator({
+        operator: "all_of",
+        title: "Required Courses",
+      })
+      required.addCourse({ course: 123 })
+
       const program = factories.programs.program({
-        req_tree: [
-          {
-            id: 1,
-            data: {
-              node_type: "operator",
-              operator: "all_of",
-              operator_value: "0",
-              elective_flag: false,
-              title: "Required Courses",
-              course: null,
-              program: null,
-              required_program: null,
-            },
-            children: [
-              {
-                id: 2,
-                data: {
-                  node_type: "course",
-                  course: 123,
-                  operator: null,
-                  operator_value: "0",
-                  elective_flag: false,
-                  title: null,
-                  program: null,
-                  required_program: null,
-                },
-                children: [],
-              },
-            ],
-          },
-        ],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
       })
       const result = mitxonlineProgram(program)
 
       expect(result.reqTree).toHaveLength(1)
-      expect(result.reqTree[0]).toEqual({
-        id: 1,
-        data: {
-          node_type: "operator",
-          operator: "all_of",
-          operator_value: "0",
-          elective_flag: false,
-          title: "Required Courses",
-          course: null,
-          program: null,
-          required_program: null,
-        },
-        children: [
-          {
-            id: 2,
-            data: {
-              node_type: "course",
-              course: 123,
-              operator: null,
-              operator_value: "0",
-              elective_flag: false,
-              title: null,
-              program: null,
-              required_program: null,
-            },
-            children: [],
-          },
-        ],
-      })
+      expect(result.reqTree[0].data.node_type).toBe("operator")
+      expect(result.reqTree[0].data.operator).toBe("all_of")
+      expect(result.reqTree[0].data.title).toBe("Required Courses")
+      expect(result.reqTree[0].children).toHaveLength(1)
+      expect(result.reqTree[0].children?.[0].data.node_type).toBe("course")
+      expect(result.reqTree[0].children?.[0].data.course).toBe(123)
     })
 
     test("handles program with empty reqTree", () => {
@@ -761,53 +715,20 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
     })
 
     test("handles deeply nested requirement trees", () => {
+      const reqTree = new factories.requirements.RequirementTreeBuilder()
+      const allRequired = reqTree.addOperator({
+        operator: "all_of",
+        title: "Program Requirements",
+      })
+      const electives = allRequired.addOperator({
+        operator: "min_number_of",
+        operator_value: "2",
+        title: "Electives",
+      })
+      electives.addCourse({ course: 456 })
+
       const program = factories.programs.program({
-        req_tree: [
-          {
-            id: 1,
-            data: {
-              node_type: "operator",
-              operator: "all_of",
-              operator_value: "0",
-              elective_flag: false,
-              title: "Program Requirements",
-              course: null,
-              program: null,
-              required_program: null,
-            },
-            children: [
-              {
-                id: 2,
-                data: {
-                  node_type: "operator",
-                  operator: "min_number_of",
-                  operator_value: "2",
-                  elective_flag: true,
-                  title: "Electives",
-                  course: null,
-                  program: null,
-                  required_program: null,
-                },
-                children: [
-                  {
-                    id: 3,
-                    data: {
-                      node_type: "course",
-                      course: 456,
-                      operator: null,
-                      operator_value: "0",
-                      elective_flag: false,
-                      title: null,
-                      program: null,
-                      required_program: null,
-                    },
-                    children: [],
-                  },
-                ],
-              },
-            ],
-          },
-        ],
+        req_tree: reqTree.children?.map((child) => child.serialize()) || [],
       })
       const result = mitxonlineProgram(program)
 

From c5ea9ddc4fae87db009cee332fe1ff6b5dc0a05f Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 26 Nov 2025 12:13:37 -0500
Subject: [PATCH 24/26] filter program enrollments shown in enrollmentdisplay
 by their present in a b2b contract, not the presence of a b2b_contract_id on
 one of the enrollments

---
 .../CoursewareDisplay/EnrollmentDisplay.tsx   | 17 +++++--
 .../CoursewareDisplay/transform.test.tsx      | 48 +++++++++++++++----
 .../CoursewareDisplay/transform.ts            | 18 +++----
 3 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index 1f0816909f..c1985e71e8 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -24,6 +24,7 @@ import type { AxiosError } from "axios"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
 import { programsQueries } from "api/mitxonline-hooks/programs"
 import { V2ProgramRequirement } from "@mitodl/mitxonline-api-axios/v2"
+import { contractQueries } from "api/mitxonline-hooks/contracts"
 
 const Wrapper = styled.div(({ theme }) => ({
   marginTop: "32px",
@@ -400,13 +401,17 @@ const AllEnrollmentsDisplay: React.FC = () => {
       select: userEnrollmentsToDashboardCourses,
       throwOnError: onError,
     })
-
+  const { data: contracts, isLoading: contractsLoading } = useQuery(
+    contractQueries.contractsList(),
+  )
   const { data: programEnrollments, isLoading: programEnrollmentsLoading } =
     useQuery({
       ...enrollmentQueries.programEnrollmentsList(),
-      select: programEnrollmentsToPrograms,
       throwOnError: onError,
     })
+  const filteredProgramEnrollments = programEnrollments
+    ? programEnrollmentsToPrograms(programEnrollments, contracts)
+    : []
 
   const { completed, expired, started, notStarted } = sortEnrollments(
     enrolledCourses || [],
@@ -421,8 +426,12 @@ const AllEnrollmentsDisplay: React.FC = () => {
       <EnrollmentExpandCollapse
         shownCourseRunEnrollments={shownEnrollments}
         hiddenCourseRunEnrollments={expired}
-        programEnrollments={programEnrollments || []}
-        isLoading={courseEnrollmentsLoading || programEnrollmentsLoading}
+        programEnrollments={filteredProgramEnrollments || []}
+        isLoading={
+          courseEnrollmentsLoading ||
+          programEnrollmentsLoading ||
+          contractsLoading
+        }
       />
     </Wrapper>
   ) : null
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
index 3ddf5d96ac..f341667e55 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.test.tsx
@@ -1,6 +1,7 @@
 import { factories, factories as mitx } from "api/mitxonline-test-utils"
 import { DashboardResourceType, EnrollmentStatus } from "./types"
 import type { DashboardResource } from "./types"
+import type { ContractPage } from "@mitodl/mitxonline-api-axios/v2"
 
 import {
   organizationCoursesWithContracts,
@@ -739,13 +740,13 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
   })
 
   describe("programEnrollmentsToPrograms", () => {
-    test("filters out B2B program enrollments", () => {
+    test("includes all programs when no contracts provided", () => {
       const programEnrollments = [
         factories.enrollment.programEnrollmentV2({
           enrollments: [
             {
               ...factories.enrollment.courseEnrollment(),
-              b2b_contract_id: 123, // B2B enrollment
+              b2b_contract_id: 123,
               b2b_organization_id: 456,
             },
           ],
@@ -754,7 +755,7 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
           enrollments: [
             {
               ...factories.enrollment.courseEnrollment(),
-              b2b_contract_id: null, // Non-B2B enrollment
+              b2b_contract_id: null,
               b2b_organization_id: null,
             },
           ],
@@ -763,8 +764,39 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
 
       const result = programEnrollmentsToPrograms(programEnrollments)
 
-      expect(result).toHaveLength(1)
+      expect(result).toHaveLength(2)
       expect(result[0].type).toBe(DashboardResourceType.Program)
+      expect(result[1].type).toBe(DashboardResourceType.Program)
+    })
+
+    test("filters out programs listed in contracts", () => {
+      const program1 = factories.programs.program()
+      const program2 = factories.programs.program()
+      const program3 = factories.programs.program()
+
+      const programEnrollments = [
+        factories.enrollment.programEnrollmentV2({
+          program: program1,
+        }),
+        factories.enrollment.programEnrollmentV2({
+          program: program2,
+        }),
+        factories.enrollment.programEnrollmentV2({
+          program: program3,
+        }),
+      ]
+
+      const contracts: ContractPage[] = [
+        {
+          ...factories.contracts.contract(),
+          programs: [program1.id, program3.id], // Programs 1 and 3 are in contracts
+        },
+      ]
+
+      const result = programEnrollmentsToPrograms(programEnrollments, contracts)
+
+      expect(result).toHaveLength(1)
+      expect(result[0].id).toBe(program2.id)
     })
 
     test("includes program enrollment data", () => {
@@ -814,17 +846,17 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
       expect(result[0].type).toBe(DashboardResourceType.Program)
     })
 
-    test("filters out programs where ANY enrollment is B2B", () => {
+    test("includes programs even if some enrollments are B2B", () => {
       const programEnrollment = factories.enrollment.programEnrollmentV2({
         enrollments: [
           {
             ...factories.enrollment.courseEnrollment(),
-            b2b_contract_id: null, // Non-B2B
+            b2b_contract_id: null,
             b2b_organization_id: null,
           },
           {
             ...factories.enrollment.courseEnrollment(),
-            b2b_contract_id: 123, // B2B
+            b2b_contract_id: 123,
             b2b_organization_id: 456,
           },
         ],
@@ -832,7 +864,7 @@ describe("Transforming mitxonline enrollment data to DashboardResource", () => {
 
       const result = programEnrollmentsToPrograms([programEnrollment])
 
-      expect(result).toHaveLength(0)
+      expect(result).toHaveLength(1)
     })
 
     test("handles empty program enrollments array", () => {
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
index 69f83c6994..97375c95ce 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts
@@ -268,16 +268,18 @@ const organizationCoursesWithContracts = (raw: {
 
 const programEnrollmentsToPrograms = (
   data: V2UserProgramEnrollmentDetail[],
+  contracts?: ContractPage[],
 ): DashboardProgram[] => {
-  // Filter out program enrollments where any course enrollment is tied to a B2B contract
-  const nonB2BProgramEnrollments = data.filter((programEnrollment) => {
-    // Only include the program if NONE of its enrollments have a B2B contract
-    return !programEnrollment.enrollments.some(
-      (enrollment) => enrollment.b2b_contract_id !== null,
-    )
-  })
+  const filteredProgramEnrollments = contracts
+    ? data.filter((programEnrollment) => {
+        // Only include the program if it is NOT listed in any of the contracts' programs
+        return !contracts.some((contract) =>
+          contract.programs.includes(programEnrollment.program.id),
+        )
+      })
+    : data
 
-  return nonB2BProgramEnrollments.map((programEnrollment) => {
+  return filteredProgramEnrollments.map((programEnrollment) => {
     const program = mitxonlineProgram(programEnrollment.program)
     program.enrollment =
       transformProgramEnrollmentToDashboard(programEnrollment)

From 37538fd135a5eb7cf06a140b7693c74f862d420e Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 26 Nov 2025 13:16:08 -0500
Subject: [PATCH 25/26] use h1 components for headers, use node id as key

---
 env/shared.env                                        |  5 +++++
 .../CoursewareDisplay/EnrollmentDisplay.tsx           | 11 ++++++++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/env/shared.env b/env/shared.env
index 178503bf27..5583523cd9 100644
--- a/env/shared.env
+++ b/env/shared.env
@@ -13,3 +13,8 @@ APISIX_PORT=8065
 KEYCLOAK_PORT=8066
 KEYCLOAK_SSL_PORT=8067
 REDIS_VIEW_CACHE_DURATION=0
+
+# APISIX session cookie defaults (can be overridden in local env)
+APISIX_COOKIE_SECURE=false
+APISIX_COOKIE_SAMESITE=Lax
+APISIX_REDIRECT_URI=http://host.docker.internal:8777/.apisix/redirect
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
index c1985e71e8..9d33288a99 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx
@@ -282,6 +282,7 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
           })
 
         return {
+          key: node.id,
           title: getRequirementSectionTitle(node),
           courses: sectionCourses,
           node,
@@ -314,7 +315,7 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
           <Typography variant="h5" color={theme.custom.colors.silverGrayDark}>
             MITx | {program?.programType}
           </Typography>
-          <Typography variant="h3" paddingBottom="32px">
+          <Typography component="h1" variant="h3" paddingBottom="32px">
             {program?.title}
           </Typography>
           <Typography variant="body2">
@@ -339,14 +340,18 @@ const ProgramEnrollmentDisplay: React.FC<ProgramEnrollmentDisplayProps> = ({
               : section.courses.length
 
           return (
-            <React.Fragment key={index}>
+            <React.Fragment key={section.key}>
               <Stack
                 direction="row"
                 justifyContent="space-between"
                 marginBottom="16px"
                 marginTop={index > 0 ? "32px" : "0"}
               >
-                <Typography variant="subtitle2" color={theme.custom.colors.red}>
+                <Typography
+                  component="h1"
+                  variant="subtitle2"
+                  color={theme.custom.colors.red}
+                >
                   {section.title}
                 </Typography>
                 <Typography

From 00b0b4c9159ac91b73ce062a267c8692c40104f6 Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Wed, 26 Nov 2025 13:24:55 -0500
Subject: [PATCH 26/26] add proper mocking for contracts

---
 .../CoursewareDisplay/DashboardDialogs.test.tsx          | 1 +
 .../CoursewareDisplay/EnrollmentDisplay.test.tsx         | 9 +++++++++
 2 files changed, 10 insertions(+)

diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
index 2a2b942581..c271223cc6 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardDialogs.test.tsx
@@ -44,6 +44,7 @@ describe("DashboardDialogs", () => {
       mitxonline.urls.programEnrollments.enrollmentsListV2(),
       [],
     )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     return { enrollments, completed, expired, started, notStarted }
   }
diff --git a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
index 1c63082f52..d6d37f2a89 100644
--- a/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
+++ b/frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.test.tsx
@@ -33,6 +33,7 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.programEnrollments.enrollmentsListV2(),
       [],
     )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     return { enrollments, completed, expired, started, notStarted }
   }
@@ -140,6 +141,7 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.programEnrollments.enrollmentsListV2(),
       [programEnrollment],
     )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     renderWithProviders(<EnrollmentDisplay />)
 
@@ -187,6 +189,7 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.programEnrollments.enrollmentsListV2(),
       [programEnrollment],
     )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     renderWithProviders(<EnrollmentDisplay />)
 
@@ -212,6 +215,7 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.programEnrollments.enrollmentsListV2(),
       [],
     )
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [])
 
     renderWithProviders(<EnrollmentDisplay />)
 
@@ -277,6 +281,11 @@ describe("EnrollmentDisplay", () => {
       mitxonline.urls.programEnrollments.enrollmentsListV2(),
       [b2bProgramEnrollment, nonB2BProgramEnrollment],
     )
+    // Mock contracts to filter out the B2B program
+    const contract = mitxonline.factories.contracts.contract({
+      programs: [b2bProgramEnrollment.program.id],
+    })
+    setMockResponse.get(mitxonline.urls.contracts.contractsList(), [contract])
 
     renderWithProviders(<EnrollmentDisplay />)