chore: Remove product page feature flag (#3501)

* reove product page feature flag

* Use resource.url for MITx Online CTA links instead of client-side rewrite

CallToActionSection rewrote MITx Online course/program URLs to Learn
product-page paths client-side (coursePageView/programPageView). The
backend MITx Online ETL now populates resource.url with those same Learn
product URLs (gated on has_product_page), so the rewrite is a duplicate.

Drop the MITx Online branch in getResourceUrl and let those resources
fall through to resource.url like every other resource. The result is
behavior-preserving for published resources (same path, same-origin so
still internal/no-UTM and client-navigated), and resources without a
product page now correctly get no link rather than a dead product-page
path derived from readable_id.

ProgramAsCourseCard keeps its programPageView rewrite: its data comes
straight from the MITx Online dashboard API and has no resource.url.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: ChristopherChudzicki

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

@@ -14,14 +14,10 @@ import { waitFor } from "@testing-library/react"
 import invariant from "tiny-invariant"
 import moment from "moment"
 import NiceModal from "@ebay/nice-modal-react"
-import { useFeatureFlagEnabled } from "posthog-js/react"
 import { UnenrollProgramDialog } from "./DashboardDialogs"
 import { mitxonlineLegacyUrl } from "@/common/mitxonline"
 
 jest.mock("posthog-js/react")
-const mockedUseFeatureFlagEnabled = jest
-  .mocked(useFeatureFlagEnabled)
-  .mockImplementation(() => false)
 
 describe("ProgramAsCourseCard", () => {
   setupLocationMock()
@@ -431,47 +427,7 @@ describe("ProgramAsCourseCard", () => {
     expect(certButton).not.toBeInTheDocument()
   })
 
-  test("shows legacy details link in context menu when product pages flag is disabled", async () => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(false)
-    const cardData = setupCardData({ includeProgramEnrollment: true })
-
-    renderWithProviders(
-      <ProgramAsCourseCard
-        courseProgram={cardData.courseProgram}
-        moduleCourses={cardData.moduleCourses}
-        moduleEnrollmentsByCourseId={cardData.moduleEnrollmentsByCourseId}
-        courseProgramEnrollment={cardData.courseProgramEnrollment}
-      />,
-    )
-
-    await screen.findByText(cardData.courseProgram.title)
-    const programCard = screen.getByTestId("program-as-course-card")
-    await user.click(within(programCard).getAllByLabelText("More options")[0])
-
-    const detailsLink = await screen.findByRole("menuitem", {
-      name: "View Course Details",
-    })
-    expect(detailsLink).toHaveAttribute(
-      "href",
-      expect.stringContaining(
-        `/programs/${cardData.courseProgram.readable_id}`,
-      ),
-    )
-    expect(detailsLink).toHaveAttribute(
-      "href",
-      expect.stringContaining("ecom-service=true"),
-    )
-
-    expect(
-      screen.getByRole("menuitem", { name: "Program Record" }),
-    ).toHaveAttribute(
-      "href",
-      mitxonlineLegacyUrl(`/records/${cardData.courseProgram.id}/`),
-    )
-  })
-
-  test("shows product-page details link in context menu when product pages flag is enabled", async () => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(true)
+  test("shows product-page details link in context menu", async () => {
     const cardData = setupCardData({ includeProgramEnrollment: true })
 
     renderWithProviders(
@@ -504,7 +460,6 @@ describe("ProgramAsCourseCard", () => {
   })
 
   test("clicking Unenroll menu item opens UnenrollProgramDialog with readable_id", async () => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(false)
     const cardData = setupCardData({ includeProgramEnrollment: true })
     invariant(cardData.courseProgramEnrollment)
     cardData.courseProgramEnrollment.enrollment_mode = "audit"
@@ -532,7 +487,6 @@ describe("ProgramAsCourseCard", () => {
   })
 
   test("does not show Unenroll option in context menu for verified enrollment", async () => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(false)
     const cardData = setupCardData({ includeProgramEnrollment: true })
     invariant(cardData.courseProgramEnrollment)
     cardData.courseProgramEnrollment.enrollment_mode = "verified"

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

@@ -37,8 +37,6 @@ import { RiAwardFill, RiMore2Line } from "@remixicon/react"
 import NiceModal from "@ebay/nice-modal-react"
 import { UnenrollProgramDialog } from "./DashboardDialogs"
 import { ProgramCertificateButton } from "./ProgramEnrollmentDisplay"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { FeatureFlags } from "@/common/feature_flags"
 import { programPageView } from "@/common/urls"
 
 const ProgramCardRoot = styled.div(({ theme }) => ({
@@ -284,15 +282,12 @@ const getContextMenuItems = (
   resource: ProgramAsCourse,
   enrollmentMode: string | null | undefined,
   additionalItems: SimpleMenuItem[] = [],
-  useProductPages = false,
 ) => {
   const menuItems = []
-  const detailsUrl = useProductPages
-    ? programPageView({
-        readable_id: resource.readable_id,
-        display_mode: "course",
-      })
-    : mitxonlineLegacyUrl(`/programs/${resource.readable_id}`)
+  const detailsUrl = programPageView({
+    readable_id: resource.readable_id,
+    display_mode: "course",
+  })
 
   const courseMenuItems = []
 
@@ -405,9 +400,6 @@ const ProgramAsCourseCard: React.FC<ProgramAsCourseCardProps> = ({
   className,
   onUpgradeError,
 }) => {
-  const useProductPages = useFeatureFlagEnabled(
-    FeatureFlags.MitxOnlineProductPages,
-  )
   const moduleRequirementSection = courseProgram?.req_tree?.find(
     (node) => node.data.node_type === "operator",
   )
@@ -488,7 +480,6 @@ const ProgramAsCourseCard: React.FC<ProgramAsCourseCardProps> = ({
     courseProgram,
     courseProgramEnrollment?.enrollment_mode,
     contextMenuItems,
-    useProductPages ?? false,
   )
 
   const contextMenu = (

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

@@ -16,15 +16,12 @@ import { notFound } from "next/navigation"
 import { useStayUpdatedEnv } from "./test-utils/stayUpdated"
 
 import { useFeatureFlagEnabled } from "posthog-js/react"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import invariant from "tiny-invariant"
 import { getOutlineCoursewareId } from "./util"
 import { FeatureFlags } from "@/common/feature_flags"
 
 jest.mock("posthog-js/react")
 const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
-jest.mock("@/common/useFeatureFlagsLoaded")
-const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
 
 const makeCourse = factories.courses.course
 const makePage = factories.pages.coursePageItem
@@ -107,35 +104,8 @@ const setupApis = ({
 describe("CoursePage", () => {
   beforeEach(() => {
     mockedUseFeatureFlagEnabled.mockReturnValue(true)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
   })
 
-  test.each([
-    { flagsLoaded: true, isEnabled: true, shouldNotFound: false },
-    { flagsLoaded: true, isEnabled: false, shouldNotFound: true },
-    { flagsLoaded: false, isEnabled: true, shouldNotFound: false },
-    { flagsLoaded: false, isEnabled: false, shouldNotFound: false },
-  ])(
-    "Calls noFound if and only the feature flag is disabled",
-    async ({ flagsLoaded, isEnabled, shouldNotFound }) => {
-      mockedUseFeatureFlagEnabled.mockReturnValue(isEnabled)
-      mockedUseFeatureFlagsLoaded.mockReturnValue(flagsLoaded)
-
-      const course = makeCourse()
-      const page = makePage({ course_details: course })
-      setupApis({ course, page })
-      renderWithProviders(<CoursePage readableId={course.readable_id} />, {
-        url: `/courses/${course.readable_id}/`,
-      })
-
-      if (shouldNotFound) {
-        expect(notFound).toHaveBeenCalled()
-      } else {
-        expect(notFound).not.toHaveBeenCalled()
-      }
-    },
-  )
-
   test("Page has expected headings", async () => {
     const course = makeCourse()
     const page = makePage({ course_details: course })

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

@@ -19,7 +19,6 @@ import WhatYoullLearnSection from "./WhatYoullLearnSection"
 import HowYoullLearnSection from "./HowYoullLearnSection"
 import { DEFAULT_RESOURCE_IMG } from "ol-utilities"
 import { isVerifiedEnrollmentMode } from "@/common/mitxonline"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import CourseInfoBox from "./InfoBoxCourse"
 import CourseEnrollmentButton from "./CourseEnrollmentButton"
 import CourseOutlineSection from "./CourseOutlineSection"
@@ -54,15 +53,9 @@ const CoursePage: React.FC<CoursePageProps> = ({ readableId }) => {
     ...coursesQueries.courseOutline(effectiveOutlineCoursewareId ?? ""),
     enabled: Boolean(effectiveOutlineCoursewareId),
   })
-  const enabled = useFeatureFlagEnabled(FeatureFlags.MitxOnlineProductPages)
   const showCourseOutline = useFeatureFlagEnabled(
     FeatureFlags.CourseOutlineSection,
   )
-  const flagsLoaded = useFeatureFlagsLoaded()
-
-  if (!enabled) {
-    return flagsLoaded ? notFound() : null
-  }
 
   const doneLoading = pages.isSuccess && courses.isSuccess
 

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

@@ -26,19 +26,14 @@ import {
 import { assertHeadings } from "ol-test-utilities"
 import ProgramAsCoursePage from "./ProgramAsCoursePage"
 import { notFound } from "next/navigation"
-import { useFeatureFlagEnabled } from "posthog-js/react"
 import {
   useStayUpdatedEnv,
   PROGRAM_HIDE_STAY_UPDATED_CASES,
 } from "./test-utils/stayUpdated"
 import invariant from "tiny-invariant"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import { getIdsFromReqTree } from "@/common/mitxonline"
 
 jest.mock("posthog-js/react")
-const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
-jest.mock("@/common/useFeatureFlagsLoaded")
-const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
 
 const makeProgramAsCourse: typeof factories.programs.program = (
   overrides = {},
@@ -121,11 +116,6 @@ const setupApis = ({
 }
 
 describe("ProgramAsCoursePage", () => {
-  beforeEach(() => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(true)
-    mockedUseFeatureFlagsLoaded.mockReturnValue(true)
-  })
-
   test("Page has expected headings", async () => {
     const reqTree = new RequirementTreeBuilder()
     const op = reqTree.addOperator({ operator: "all_of" })

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

@@ -6,8 +6,6 @@ import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { useQuery } from "@tanstack/react-query"
 import { styled } from "@mitodl/smoot-design"
 import { programsQueries } from "api/mitxonline-hooks/programs"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { FeatureFlags } from "@/common/feature_flags"
 import { notFound } from "next/navigation"
 import { HeadingIds, parseReqTree } from "./util"
 import type { RequirementItem } from "./util"
@@ -23,7 +21,6 @@ import ProductPageTemplate from "./ProductPageTemplate"
 import WhatYoullLearnSection from "./WhatYoullLearnSection"
 import HowYoullLearnSection from "./HowYoullLearnSection"
 import { DEFAULT_RESOURCE_IMG, pluralize } from "ol-utilities"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import ProgramAsCourseInfoBox from "./InfoBoxProgramAsCourse"
 import ProgramEnrollmentButton from "./ProgramEnrollmentButton"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
@@ -241,13 +238,6 @@ const ProgramAsCoursePage: React.FC<ProgramAsCoursePageProps> = ({
     enabled: programIds.length > 0,
   })
 
-  const enabled = useFeatureFlagEnabled(FeatureFlags.MitxOnlineProductPages)
-  const flagsLoaded = useFeatureFlagsLoaded()
-
-  if (!enabled) {
-    return flagsLoaded ? notFound() : null
-  }
-
   const isLoading = pages.isLoading || programs.isLoading
 
   if (!page || !program) {

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

@@ -31,22 +31,18 @@ import {
   PROGRAM_HIDE_STAY_UPDATED_CASES,
 } from "./test-utils/stayUpdated"
 
-import { useFeatureFlagEnabled, usePostHog } from "posthog-js/react"
+import { usePostHog } from "posthog-js/react"
 import invariant from "tiny-invariant"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import { getIdsFromReqTree } from "@/common/mitxonline"
 import { faker } from "@faker-js/faker/locale/en"
 import { PostHogEvents } from "@/common/constants"
 
 jest.mock("posthog-js/react")
-const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
 const mockCapture = jest.fn()
 jest.mocked(usePostHog).mockReturnValue(
   // @ts-expect-error Not mocking all of posthog
   { capture: mockCapture },
 )
-jest.mock("@/common/useFeatureFlagsLoaded")
-const mockedUseFeatureFlagsLoaded = jest.mocked(useFeatureFlagsLoaded)
 
 const makeProgram = factories.programs.program
 const makePage = factories.pages.programPageItem
@@ -225,36 +221,6 @@ const setupApis = ({
 }
 
 describe("ProgramPage", () => {
-  beforeEach(() => {
-    mockedUseFeatureFlagEnabled.mockReturnValue(true)
-  })
-
-  test.each([
-    { flagsLoaded: true, isEnabled: true, shouldNotFound: false },
-    { flagsLoaded: true, isEnabled: false, shouldNotFound: true },
-    { flagsLoaded: false, isEnabled: true, shouldNotFound: false },
-    { flagsLoaded: false, isEnabled: false, shouldNotFound: false },
-  ])(
-    "Calls notFound if and only if the feature flag is disabled",
-    async ({ flagsLoaded, isEnabled, shouldNotFound }) => {
-      mockedUseFeatureFlagEnabled.mockReturnValue(isEnabled)
-      mockedUseFeatureFlagsLoaded.mockReturnValue(flagsLoaded)
-
-      const program = makeProgram({ ...makeReqs() })
-      const page = makePage({ program_details: program })
-      setupApis({ program, page })
-      renderWithProviders(<ProgramPage readableId={program.readable_id} />, {
-        url: `/programs/${program.readable_id}/`,
-      })
-
-      if (shouldNotFound) {
-        expect(notFound).toHaveBeenCalled()
-      } else {
-        expect(notFound).not.toHaveBeenCalled()
-      }
-    },
-  )
-
   test("Page has expected headings", async () => {
     const program = makeProgram({
       ...makeReqs({

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

@@ -7,8 +7,6 @@ import { pagesQueries } from "api/mitxonline-hooks/pages"
 import { useQuery } from "@tanstack/react-query"
 import { styled } from "@mitodl/smoot-design"
 import { programsQueries } from "api/mitxonline-hooks/programs"
-import { useFeatureFlagEnabled } from "posthog-js/react"
-import { FeatureFlags } from "@/common/feature_flags"
 import { notFound } from "next/navigation"
 import { HeadingIds, parseReqTree, RequirementData } from "./util"
 import {
@@ -27,7 +25,6 @@ import type {
   CourseWithCourseRunsSerializerV2,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { DEFAULT_RESOURCE_IMG, pluralize } from "ol-utilities"
-import { useFeatureFlagsLoaded } from "@/common/useFeatureFlagsLoaded"
 import ProgramInfoBox from "./InfoBoxProgram"
 import { coursesQueries } from "api/mitxonline-hooks/courses"
 import MitxOnlineResourceCard from "./MitxOnlineResourceCard"
@@ -258,13 +255,6 @@ const ProgramPage: React.FC<ProgramPageProps> = ({ readableId }) => {
     enabled: programIds.length > 0,
   })
 
-  const enabled = useFeatureFlagEnabled(FeatureFlags.MitxOnlineProductPages)
-  const flagsLoaded = useFeatureFlagsLoaded()
-
-  if (!enabled) {
-    return flagsLoaded ? notFound() : null
-  }
-
   const isLoading = pages.isLoading || programs.isLoading
 
   if (!page || !program) {

frontends/main/src/common/feature_flags.ts

@@ -10,7 +10,6 @@ export enum FeatureFlags {
   UniversalAI = "universal-ai",
   UniversalAISearchBanner = "universal-ai-search-banner",
   VideoShorts = "video-shorts",
-  MitxOnlineProductPages = "mitxonline-product-pages",
   CourseOutlineSection = "course-outline-section",
   OcwProductPages = "ocw-product-pages",
   VideoPlaylistPage = "video-playlist-page",