Advertise parent programs on course product pages

frontends/api/src/mitxonline/hooks/programs/queries.ts

@@ -5,7 +5,7 @@ import type {
   ProgramCollectionsApiProgramCollectionsListRequest,
   ProgramsApiProgramsListV2Request,
   ProgramsApiProgramsRetrieveV2Request,
-  V2Program,
+  V2ProgramDetail,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { programCollectionsApi, programsApi } from "../../clients"
 
@@ -30,7 +30,7 @@ const programsQueries = {
   programDetail: (opts: ProgramsApiProgramsRetrieveV2Request) =>
     queryOptions({
       queryKey: programsKeys.programDetail(opts),
-      queryFn: async (): Promise<V2Program> => {
+      queryFn: async (): Promise<V2ProgramDetail> => {
         return programsApi.programsRetrieveV2(opts).then((res) => res.data)
       },
     }),

frontends/main/src/app-pages/ProductPages/CourseEnrollmentButton.tsx

@@ -106,7 +106,7 @@ const CourseEnrollmentButton: React.FC<CourseEnrollmentButtonProps> = ({
 
   return (
     <>
-      <Stack width="100%" gap="12px">
+      <Stack gap="12px">
         <Button
           disabled={
             !nextRun ||

frontends/main/src/app-pages/ProductPages/CoursePage.test.tsx

@@ -11,7 +11,6 @@ import {
 } from "api/test-utils"
 import { renderWithProviders, waitFor, screen, within } from "@/test-utils"
 import CoursePage from "./CoursePage"
-import { HeadingIds } from "./util"
 import { assertHeadings } from "ol-test-utilities"
 import { notFound } from "next/navigation"
 
@@ -97,7 +96,7 @@ describe("CoursePage", () => {
     await waitFor(() => {
       assertHeadings([
         { level: 1, name: page.title },
-        { level: 2, name: "Course summary" },
+        { level: 2, name: "Course Information" },
         { level: 2, name: "About this Course" },
         { level: 2, name: "What you'll learn" },
         { level: 2, name: "How you'll learn" },
@@ -109,34 +108,6 @@ describe("CoursePage", () => {
     })
   })
 
-  test("Page Navigation", async () => {
-    const course = makeCourse()
-    const page = makePage({ course_details: course })
-    setupApis({ course, page })
-    renderWithProviders(<CoursePage readableId={course.readable_id} />)
-
-    const nav = await screen.findByRole("navigation", {
-      name: "Course Details",
-    })
-    const links = within(nav).getAllByRole("link")
-
-    expect(links[0]).toHaveTextContent("About")
-    expect(links[0]).toHaveAttribute("href", `#${HeadingIds.About}`)
-    expect(document.getElementById(HeadingIds.About)).toBeVisible()
-    expect(links[1]).toHaveTextContent("What you'll learn")
-    expect(links[1]).toHaveAttribute("href", `#${HeadingIds.What}`)
-    expect(document.getElementById(HeadingIds.What)).toBeVisible()
-    expect(links[2]).toHaveTextContent("How you'll learn")
-    expect(links[2]).toHaveAttribute("href", `#${HeadingIds.How}`)
-    expect(document.getElementById(HeadingIds.How)).toBeVisible()
-    expect(links[3]).toHaveTextContent("Prerequisites")
-    expect(links[3]).toHaveAttribute("href", `#${HeadingIds.Prereqs}`)
-    expect(document.getElementById(HeadingIds.Prereqs)).toBeVisible()
-    expect(links[4]).toHaveTextContent("Instructors")
-    expect(links[4]).toHaveAttribute("href", `#${HeadingIds.Instructors}`)
-    expect(document.getElementById(HeadingIds.Instructors)).toBeVisible()
-  })
-
   // Collasping sections tested in AboutSection.test.tsx
   test("About section has expected content", async () => {
     const course = makeCourse()
@@ -192,14 +163,34 @@ describe("CoursePage", () => {
     expectRawContent(section, page.prerequisites)
   })
 
+  test("Renders program bundle upsell when course belongs to a program (content tested in ProgramBundleUpsell.test)", async () => {
+    const baseProgram = factories.programs.baseProgram()
+    const programDetail = factories.programs.program({
+      id: baseProgram.id,
+      readable_id: baseProgram.readable_id,
+      products: [factories.courses.product({ price: "500" })],
+    })
+    const course = makeCourse({ programs: [baseProgram] })
+    const page = makePage({ course_details: course })
+    setupApis({ course, page })
+    setMockResponse.get(urls.programs.programsList({ id: [baseProgram.id] }), {
+      results: [programDetail],
+    })
+    renderWithProviders(<CoursePage readableId={course.readable_id} />)
+
+    expect(
+      await screen.findByTestId("program-bundle-upsell"),
+    ).toBeInTheDocument()
+  })
+
   test("Renders an enrollment button", async () => {
     const course = makeCourse()
     const page = makePage({ course_details: course })
     setupApis({ course, page })
     renderWithProviders(<CoursePage readableId={course.readable_id} />)
 
-    const buttons = await screen.findAllByTestId("course-enrollment-button")
-    expect(buttons.length).toBeGreaterThanOrEqual(1)
+    const button = await screen.findByTestId("course-enrollment-button")
+    expect(button).toBeInTheDocument()
   })
 
   test("Shows a YouTube video in the sidebar when video_url is a YouTube URL", async () => {

frontends/main/src/app-pages/ProductPages/CoursePage.tsx

@@ -7,7 +7,6 @@ import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { useQuery } from "@tanstack/react-query"
 import { styled } from "@mitodl/smoot-design"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
-import { CourseSummary } from "./ProductSummary"
 import { useFeatureFlagEnabled } from "posthog-js/react"
 import { FeatureFlags } from "@/common/feature_flags"
 import { notFound } from "next/navigation"
@@ -16,14 +15,12 @@ import InstructorsSection from "./InstructorsSection"
 import RawHTML from "./RawHTML"
 import AboutSection from "./AboutSection"
 import ProductPageTemplate from "./ProductPageTemplate"
-import ProductNavbar, { HeadingData } from "./ProductNavbar"
 import WhoCanTakeSection from "./WhoCanTakeSection"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
 import HowYoullLearnSection, { DEFAULT_HOW_DATA } from "./HowYoullLearnSection"
-import { CoursePageItem } from "@mitodl/mitxonline-api-axios/v2"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
 import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
-import CourseEnrollmentButton from "./CourseEnrollmentButton"
+import CourseInfoBox from "./InfoBoxCourse"
 
 type CoursePageProps = {
   readableId: string
@@ -35,42 +32,6 @@ const PrerequisitesSection = styled.section({
   gap: "16px",
 })
 
-const getNavLinks = (page: CoursePageItem): HeadingData[] => {
-  const all = [
-    {
-      id: HeadingIds.About,
-      label: "About",
-      variant: "primary",
-      content: page.about,
-    },
-    {
-      id: HeadingIds.What,
-      label: "What you'll learn",
-      variant: "secondary",
-      content: page.what_you_learn,
-    },
-    {
-      id: HeadingIds.How,
-      label: "How you'll learn",
-      variant: "secondary",
-      content: true,
-    },
-    {
-      id: HeadingIds.Prereqs,
-      label: "Prerequisites",
-      variant: "secondary",
-      content: page.prerequisites,
-    },
-    {
-      id: HeadingIds.Instructors,
-      label: "Instructors",
-      variant: "secondary",
-      content: page.faculty.length ? "x" : undefined,
-    },
-  ] as const
-  return all.filter((item) => item.content)
-}
-
 const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
   const pages = useQuery(pagesQueries.coursePages(readableId))
   const courses = useQuery(
@@ -95,8 +56,6 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
     }
   }
 
-  const navLinks = getNavLinks(page)
-
   // feature_image_src will be nullable in a future MITx Online API update
   // (null means no image set). Fall back to our own default image.
   const imageSrc =
@@ -110,10 +69,7 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
       shortDescription={page.course_details.page.description}
       imageSrc={imageSrc}
       videoUrl={page.video_url}
-      summaryTitle="Course summary"
-      sidebarSummary={<CourseSummary course={course} />}
-      enrollButton={<CourseEnrollmentButton course={course} />}
-      navbar={<ProductNavbar navLinks={navLinks} productNoun="Course" />}
+      infoBox={<CourseInfoBox course={course} />}
     >
       {page.about ? (
         <AboutSection productNoun="Course" aboutHtml={page.about} />

frontends/main/src/app-pages/ProductPages/InfoBoxCourse.tsx

@@ -0,0 +1,33 @@
+import React from "react"
+import { VisuallyHidden } from "@mitodl/smoot-design"
+import type { CourseWithCourseRunsSerializerV2 } from "@mitodl/mitxonline-api-axios/v2"
+import { HeadingIds } from "./util"
+import { CourseSummary } from "./ProductSummary"
+import ProgramBundleUpsell from "./ProgramBundleUpsell"
+import CourseEnrollmentButton from "./CourseEnrollmentButton"
+import { InfoBoxCard, InfoBoxContent, InfoBoxEnrollArea } from "./InfoBoxParts"
+
+type CourseInfoBoxProps = {
+  course: CourseWithCourseRunsSerializerV2
+}
+
+const CourseInfoBox: React.FC<CourseInfoBoxProps> = ({ course }) => {
+  return (
+    <InfoBoxCard as="section" aria-labelledby={HeadingIds.Summary}>
+      <VisuallyHidden>
+        <h2 id={HeadingIds.Summary}>Course Information</h2>
+      </VisuallyHidden>
+      <InfoBoxContent>
+        <CourseSummary course={course} />
+      </InfoBoxContent>
+      <InfoBoxEnrollArea>
+        <CourseEnrollmentButton course={course} />
+      </InfoBoxEnrollArea>
+      {course.programs?.length ? (
+        <ProgramBundleUpsell programs={course.programs} />
+      ) : null}
+    </InfoBoxCard>
+  )
+}
+
+export default CourseInfoBox

frontends/main/src/app-pages/ProductPages/InfoBoxParts.tsx

@@ -0,0 +1,39 @@
+import { styled } from "@mitodl/smoot-design"
+
+/**
+ * Outer card wrapper: border, shadow, radius. No padding — children control
+ * their own insets so that elements like the bundle upsell can span edge-to-edge.
+ */
+export const InfoBoxCard = styled.div(({ theme }) => ({
+  border: `1px solid ${theme.custom.colors.lightGray2}`,
+  backgroundColor: theme.custom.colors.white,
+  borderRadius: "4px",
+  boxShadow: "0 8px 20px 0 rgba(120, 147, 172, 0.10)",
+  overflow: "hidden",
+}))
+
+/** Padded content area inside the summary card. */
+export const InfoBoxContent = styled.div(({ theme }) => ({
+  padding: "24px",
+  [theme.breakpoints.up("md")]: {
+    padding: "24px 32px",
+  },
+  [theme.breakpoints.down("sm")]: {
+    padding: "16px",
+  },
+}))
+
+export const InfoBoxEnrollArea = styled.div(({ theme }) => ({
+  padding: "8px 24px 24px",
+  [theme.breakpoints.up("md")]: {
+    padding: "8px 32px 24px",
+  },
+  [theme.breakpoints.between("sm", "md")]: {
+    display: "flex",
+    justifyContent: "flex-end",
+    "> *": { flex: "0 1 50%" },
+  },
+  [theme.breakpoints.down("sm")]: {
+    padding: "8px 16px 16px",
+  },
+}))

frontends/main/src/app-pages/ProductPages/InfoBoxProgram.tsx

@@ -0,0 +1,36 @@
+import React from "react"
+import { VisuallyHidden } from "@mitodl/smoot-design"
+import type {
+  V2ProgramDetail,
+  CourseWithCourseRunsSerializerV2,
+} from "@mitodl/mitxonline-api-axios/v2"
+import { HeadingIds } from "./util"
+import { ProgramSummary } from "./ProductSummary"
+import ProgramEnrollmentButton from "./ProgramEnrollmentButton"
+import { InfoBoxCard, InfoBoxContent, InfoBoxEnrollArea } from "./InfoBoxParts"
+
+type ProgramInfoBoxProps = {
+  program: V2ProgramDetail
+  courses?: CourseWithCourseRunsSerializerV2[]
+}
+
+const ProgramInfoBox: React.FC<ProgramInfoBoxProps> = ({
+  program,
+  courses,
+}) => {
+  return (
+    <InfoBoxCard as="section" aria-labelledby={HeadingIds.Summary}>
+      <VisuallyHidden>
+        <h2 id={HeadingIds.Summary}>Program Information</h2>
+      </VisuallyHidden>
+      <InfoBoxContent>
+        <ProgramSummary program={program} courses={courses} />
+      </InfoBoxContent>
+      <InfoBoxEnrollArea>
+        <ProgramEnrollmentButton program={program} />
+      </InfoBoxEnrollArea>
+    </InfoBoxCard>
+  )
+}
+
+export default ProgramInfoBox