Product pages, Purchasable Programs + enrollment_modes (#2995)

* bump mitxonline client

* fix tests and ts errors

* use new cart apis

* bump client

* bump client version

* update summary price display

* show financial aid pricing in course summary

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* update enrollment buttons for paid enrollment and financial aid

Show "Enroll Now—$X" for paid-only offerings. When financial aid is
applied to a course, display the discounted price with the original
price stricken. Disable the button when no price is available.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* update enrollment dialogs and buttons for enrollment mode support

- ProgramEnrollmentDialog: remove course picker, enroll in program directly;
  add certificate upsell (with Add to Cart) for "both" enrollment modes
- CourseEnrollmentDialog: add hideUpsell prop for free-only courses
- ProgramEnrollmentButton: branch on enrollmentType — free enrolls directly,
  paid goes straight to cart, both opens dialog
- CourseEnrollmentButton: branch on enrollmentType — free opens dialog with
  upsell hidden, paid goes straight to cart, both opens full dialog
- Add useCreateProgramEnrollment hook to mitxonline enrollment hooks
- Update tests for all new behaviors; remove 100x repeat from ProgramEnrollmentButton.test.tsx

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* hide enrollment upsell based on run/program enrollment modes

CourseEnrollmentDialog now derives upsell visibility from the selected
run's enrollment_modes rather than a hideUpsell prop, so the upsell
reacts dynamically as the user changes their run selection. Removes the
hideUpsell prop entirely.

ProgramEnrollmentDialog now checks program.enrollment_modes and only
renders the certificate upsell when the program offers both free and
paid options.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* make flakey test detection easier

* unify price formatting: drop .00 for whole-dollar amounts

Add formatPrice() utility that uses minimumFractionDigits:0 so whole
dollar amounts render as "$900" rather than "$900.00". Use it in program
components (ProgramEnrollmentButton, ProgramPriceRow, ProgramCertificateBox)
which previously used raw template literals. Update all affected tests.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* test: add click-action coverage for free/both enrollment modes

Add test.each covering free-only and both-modes cases that clicking
'Enroll for Free' as an authenticated user opens CourseEnrollmentDialog.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* fix: paid enrollment loading state, error handling, and price formatting

- Show loading spinner (endIcon) while basket API calls are in flight,
  keeping button text visible and disabling the button
- Catch errors from clearBasket/addToBasket mutateAsync and surface them
  via an Alert below the button; same for free program enrollment
- Fix inconsistent price formatting in ProgramCertificateUpsell: use
  formatPrice() instead of template literal to drop unnecessary .00
- Collapse redundant free/both branches in CourseEnrollmentButton click handler
- Add tests for loading and error states in both enrollment buttons

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* unify clear+add basket logic

* make onReset optional

* fix copy

* add a test covering successful enrollment redirection

* handle errors in dialogs

* no redundant resets

* simplify: use mutate+onSuccess chaining in useReplaceBasketItem; remove redundant reset calls and try/catch at call sites

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* reset during combined mutation, remove a comment

* remove unncessary comparison

* fix a rebasing issue

* disable enrollment button when enrollment_modes is empty

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* show cents except on button

* open enrollment dialog for multi-run or upsell; direct enroll otherwise

- Open dialog when enrollmentType is "both" (upsell) or multiple enrollable runs exist
- For paid-only + single run, go directly to checkout (unchanged)
- For free-only + single run, enroll directly and redirect to dashboard home

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* be defensive in dialog: hide/disable upsell+free button for bad enrollment data

- confirmText now requires enrollmentType to be "free" or "both" (not just not-paid),
  so it's hidden for "none" (bad data) as well as "paid"
- isFreeOnly now true for any type that isn't "paid" or "both", so the upsell
  is disabled for "none" in addition to "free"

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

* update mitxonline-api-axios to semver release

* remove isFreeOnly from upsell props

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: ChristopherChudzicki

frontends/api/package.json

@@ -29,7 +29,7 @@
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@mitodl/mitxonline-api-axios": "^2026.2.19",
+    "@mitodl/mitxonline-api-axios": "^2026.3.3",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.12.2",
     "tiny-invariant": "^1.3.3"

frontends/api/src/mitxonline/hooks/baskets/index.ts

@@ -23,7 +23,6 @@ const useAddToBasket = () => {
         queryKey: basketQueries.basketState().queryKey,
       })
 
-      // Redirect to MITx Online cart page
       const cartUrl = new URL(
         "/cart/",
         process.env.NEXT_PUBLIC_MITX_ONLINE_LEGACY_BASE_URL,
@@ -50,4 +49,40 @@ const useClearBasket = () => {
   })
 }
 
-export { basketQueries, useAddToBasket, useClearBasket }
+/**
+ * Hook to replace the basket with a single product, then redirect to cart.
+ *
+ * This clears the basket before adding the new item because our cart UI does
+ * not currently allow users to remove items. Having more than one item in the
+ * basket puts users in a bad UI state. Once the cart supports item removal,
+ * this hook should be replaced with a direct call to `useAddToBasket`.
+ */
+const useReplaceBasketItem = () => {
+  const addToBasket = useAddToBasket()
+  const clearBasket = useClearBasket()
+
+  const mutate = (productId: number) => {
+    // Reset addToBasket so stale error state from a previous attempt is cleared
+    // immediately. (clearBasket resets itself when .mutate() is called, but
+    // addToBasket won't reset until its own .mutate() fires in onSuccess.)
+    addToBasket.reset()
+    clearBasket.mutate(undefined, {
+      onSuccess: () => addToBasket.mutate(productId),
+    })
+  }
+
+  const mutateAsync = async (productId: number) => {
+    addToBasket.reset()
+    await clearBasket.mutateAsync()
+    await addToBasket.mutateAsync(productId)
+  }
+
+  return {
+    mutate,
+    mutateAsync,
+    isPending: clearBasket.isPending || addToBasket.isPending,
+    isError: clearBasket.isError || addToBasket.isError,
+  }
+}
+
+export { basketQueries, useAddToBasket, useClearBasket, useReplaceBasketItem }

frontends/api/src/mitxonline/hooks/enrollment/index.ts

@@ -1,10 +1,15 @@
 import { enrollmentQueries, enrollmentKeys } from "./queries"
 import { useMutation, useQueryClient } from "@tanstack/react-query"
-import { b2bApi, courseRunEnrollmentsApi } from "../../clients"
+import {
+  b2bApi,
+  courseRunEnrollmentsApi,
+  programEnrollmentsApi,
+} from "../../clients"
 import {
   B2bApiB2bEnrollCreateRequest,
   EnrollmentsApiEnrollmentsPartialUpdateRequest,
   CourseRunEnrollmentRequest,
+  ProgramEnrollmentsApiV3ProgramEnrollmentsCreateRequest,
 } from "@mitodl/mitxonline-api-axios/v2"
 
 const useCreateB2bEnrollment = () => {
@@ -65,11 +70,26 @@ const useDestroyEnrollment = () => {
   })
 }
 
+const useCreateProgramEnrollment = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (
+      opts: ProgramEnrollmentsApiV3ProgramEnrollmentsCreateRequest,
+    ) => programEnrollmentsApi.v3ProgramEnrollmentsCreate(opts),
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: enrollmentKeys.programEnrollmentsList(),
+      })
+    },
+  })
+}
+
 export {
   enrollmentQueries,
   enrollmentKeys,
   useCreateB2bEnrollment,
   useCreateEnrollment,
   useUpdateEnrollment,
   useDestroyEnrollment,
+  useCreateProgramEnrollment,
 }

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

@@ -1,7 +1,7 @@
 import { queryOptions } from "@tanstack/react-query"
 import type {
   PaginatedV2ProgramCollectionList,
-  PaginatedV2ProgramList,
+  PaginatedV2ProgramDetailList,
   ProgramCollectionsApiProgramCollectionsListRequest,
   ProgramsApiProgramsListV2Request,
   ProgramsApiProgramsRetrieveV2Request,
@@ -37,7 +37,7 @@ const programsQueries = {
   programsList: (opts: ProgramsApiProgramsListV2Request) =>
     queryOptions({
       queryKey: programsKeys.programsList(opts),
-      queryFn: async (): Promise<PaginatedV2ProgramList> => {
+      queryFn: async (): Promise<PaginatedV2ProgramDetailList> => {
         return programsApi.programsListV2(opts).then((res) => res.data)
       },
     }),

frontends/api/src/mitxonline/test-utils/factories/courses.ts

@@ -5,6 +5,7 @@ import type {
   CourseRunV2,
   V1CourseWithCourseRuns,
   ProductFlexibilePrice,
+  EnrollmentMode,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { faker } from "@faker-js/faker/locale/en"
 import { UniqueEnforcer } from "enforce-unique"
@@ -13,6 +14,15 @@ import { has } from "lodash"
 const uniqueCourseId = new UniqueEnforcer()
 const uniqueCourseRunId = new UniqueEnforcer()
 
+const enrollmentMode: Factory<EnrollmentMode> = (overrides = {}) => {
+  return {
+    mode_slug: faker.lorem.slug(),
+    mode_display_name: faker.lorem.words(2),
+    requires_payment: faker.datatype.boolean(),
+    ...overrides,
+  }
+}
+
 const v1Course: PartialFactory<V1CourseWithCourseRuns> = (overrides = {}) => {
   const defaults: V1CourseWithCourseRuns = {
     id: uniqueCourseId.enforce(() => faker.number.int()),
@@ -70,6 +80,9 @@ const v1Course: PartialFactory<V1CourseWithCourseRuns> = (overrides = {}) => {
             product_flexible_price: null,
           },
         ],
+        enrollment_modes: Array.from({
+          length: faker.number.int({ min: 1, max: 3 }),
+        }).map(() => enrollmentMode()),
         approved_flexible_price_exists: faker.datatype.boolean(),
       },
     ],
@@ -110,6 +123,9 @@ const courseRun: PartialFactory<CourseRunV2> = (overrides = {}) => {
     course_number: faker.lorem.word(),
     products: [product()],
     approved_flexible_price_exists: faker.datatype.boolean(),
+    enrollment_modes: Array.from({
+      length: faker.number.int({ min: 1, max: 3 }),
+    }).map(() => enrollmentMode()),
   }
 
   return mergeOverrides<CourseRunV2>(defaults, overrides)
@@ -183,4 +199,12 @@ const course: PartialFactory<CourseWithCourseRunsSerializerV2> = (
 const v1Courses = makePaginatedFactory(v1Course)
 const courses = makePaginatedFactory(course)
 
-export { v1Course, v1Courses, course, courses, courseRun, product }
+export {
+  v1Course,
+  v1Courses,
+  course,
+  courses,
+  courseRun,
+  product,
+  enrollmentMode,
+}

frontends/api/src/mitxonline/test-utils/factories/enrollment.ts

@@ -2,14 +2,13 @@ import { faker } from "@faker-js/faker/locale/en"
 import { mergeOverrides } from "ol-test-utilities"
 import type { PartialFactory } from "ol-test-utilities"
 import type {
-  CourseRunEnrollment,
   CourseRunEnrollmentRequestV2,
   CourseRunGrade,
-  UserProgramEnrollmentDetail,
   V3UserProgramEnrollment,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { UniqueEnforcer } from "enforce-unique"
-import { factories } from ".."
+import * as courses from "../factories/courses"
+import * as programs from "../factories/programs"
 
 const uniqueEnrollmentId = new UniqueEnforcer()
 const uniqueRunId = new UniqueEnforcer()
@@ -49,6 +48,7 @@ const courseEnrollment: PartialFactory<CourseRunEnrollmentRequestV2> = (
     enrollment_mode: faker.helpers.arrayElement(["audit", "verified"]),
     edx_emails_subscription: faker.datatype.boolean(),
     run: {
+      enrollment_modes: [courses.enrollmentMode()],
       id: uniqueRunId.enforce(() => faker.number.int()),
       title,
       start_date: faker.date.past().toISOString(),
@@ -134,70 +134,10 @@ const courseEnrollment: PartialFactory<CourseRunEnrollmentRequestV2> = (
   return mergeOverrides<CourseRunEnrollmentRequestV2>(defaults, overrides)
 }
 
-// Type-safe conversion from V2 to V1 enrollment for compatibility
-const convertV2ToV1Enrollment = (
-  v2Enrollment: CourseRunEnrollmentRequestV2,
-): CourseRunEnrollment => {
-  // Remove V2-specific fields and return V1 compatible object
-  const {
-    b2b_contract_id: b2bContractId,
-    b2b_organization_id: b2bOrganizationId,
-    ...v1Compatible
-  } = v2Enrollment
-  return v1Compatible as CourseRunEnrollment
-}
-
-const programEnrollment: PartialFactory<UserProgramEnrollmentDetail> = (
-  overrides = {},
-): UserProgramEnrollmentDetail => {
-  const defaults: UserProgramEnrollmentDetail = {
-    certificate: faker.datatype.boolean()
-      ? {
-          uuid: faker.string.uuid(),
-          link: faker.internet.url(),
-        }
-      : null,
-    program: {
-      id: faker.number.int(),
-      title: faker.lorem.words(3),
-      readable_id: faker.lorem.slug(),
-      courses: factories.courses.v1Course(),
-      requirements: {
-        required: [faker.number.int()],
-        electives: [faker.number.int()],
-      },
-      req_tree: [],
-      page: {
-        feature_image_src: faker.image.url(),
-        page_url: faker.internet.url(),
-        financial_assistance_form_url: faker.internet.url(),
-        description: faker.lorem.paragraph(),
-        live: faker.datatype.boolean(),
-        length: `${faker.number.int({ min: 1, max: 12 })} weeks`,
-        effort: `${faker.number.int({ min: 1, max: 10 })} hours/week`,
-        price: faker.commerce.price(),
-      },
-      program_type: faker.helpers.arrayElement([
-        "certificate",
-        "degree",
-        "diploma",
-      ]),
-      departments: [
-        {
-          name: faker.company.name(),
-        },
-      ],
-      live: faker.datatype.boolean(),
-    },
-    enrollments: [convertV2ToV1Enrollment(courseEnrollment())],
-  }
-  return mergeOverrides<UserProgramEnrollmentDetail>(defaults, overrides)
-}
-
 const programEnrollmentV3: PartialFactory<V3UserProgramEnrollment> = (
   overrides = {},
 ): V3UserProgramEnrollment => {
-  const program = factories.programs.simpleProgram()
+  const program = programs.simpleProgram()
   const hasCertificate = faker.datatype.boolean()
   const defaults: V3UserProgramEnrollment = {
     certificate: hasCertificate
@@ -217,10 +157,4 @@ const courseEnrollments = (count: number): CourseRunEnrollmentRequestV2[] => {
   return new Array(count).fill(null).map(() => courseEnrollment())
 }
 
-export {
-  courseEnrollment,
-  courseEnrollments,
-  grade,
-  programEnrollment,
-  programEnrollmentV3,
-}
+export { courseEnrollment, courseEnrollments, grade, programEnrollmentV3 }

frontends/api/src/mitxonline/test-utils/factories/programs.ts

@@ -1,17 +1,32 @@
 import { mergeOverrides, makePaginatedFactory } from "ol-test-utilities"
-import type { PartialFactory } from "ol-test-utilities"
+import type { Factory, PartialFactory } from "ol-test-utilities"
 import type {
-  V2Program,
+  BaseProgram,
   V2ProgramCollection,
+  V2ProgramDetail,
   V3SimpleProgram,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { faker } from "@faker-js/faker/locale/en"
 import { UniqueEnforcer } from "enforce-unique"
+import * as courses from "./courses"
 
 const uniqueProgramId = new UniqueEnforcer()
 
-const program: PartialFactory<V2Program> = (overrides = {}) => {
-  const defaults: V2Program = {
+const baseProgram: Factory<BaseProgram> = (overrides = {}) => {
+  const defaults: BaseProgram = {
+    title: faker.lorem.words(3),
+    id: uniqueProgramId.enforce(() => faker.number.int()),
+    readable_id: faker.lorem.slug(),
+    type: faker.lorem.words(),
+  }
+  return {
+    ...defaults,
+    ...overrides,
+  }
+}
+
+const program: PartialFactory<V2ProgramDetail> = (overrides = {}) => {
+  const defaults: V2ProgramDetail = {
     id: uniqueProgramId.enforce(() => faker.number.int()),
     title: faker.lorem.words(3),
     readable_id: faker.lorem.slug(),
@@ -77,10 +92,12 @@ const program: PartialFactory<V2Program> = (overrides = {}) => {
     enrollment_end: faker.helpers.maybe(() =>
       faker.date.future().toISOString(),
     ),
+    enrollment_modes: [courses.enrollmentMode()],
     end_date: faker.helpers.maybe(() => faker.date.future().toISOString()),
+    products: [courses.product()],
   }
 
-  return mergeOverrides<V2Program>(defaults, overrides)
+  return mergeOverrides<V2ProgramDetail>(defaults, overrides)
 }
 
 const programs = makePaginatedFactory(program)
@@ -122,4 +139,4 @@ const simpleProgram: PartialFactory<V3SimpleProgram> = (overrides = {}) => {
   return mergeOverrides<V3SimpleProgram>(defaults, overrides)
 }
 
-export { program, programs, programCollection, simpleProgram }
+export { baseProgram, program, programs, programCollection, simpleProgram }

frontends/jest-shared-setup.ts

@@ -1,4 +1,12 @@
+import { faker } from "@faker-js/faker/locale/en"
 import failOnConsole from "jest-fail-on-console"
+
+const seed = process.env.FAKER_SEED
+  ? parseInt(process.env.FAKER_SEED, 10)
+  : Math.floor(Math.random() * 0xffffffff)
+faker.seed(seed)
+console.info(`Faker seed: ${seed}  →  FAKER_SEED=${seed} to reproduce`)
+
 import "@testing-library/jest-dom"
 import "cross-fetch/polyfill"
 import { resetAllWhenMocks } from "jest-when"

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.27.16",
     "@mitodl/course-search-utils": "^3.5.1",
-    "@mitodl/mitxonline-api-axios": "^2026.2.19",
+    "@mitodl/mitxonline-api-axios": "^2026.3.3",
     "@mitodl/smoot-design": "^6.24.0",
     "@mui/material": "^6.4.5",
     "@mui/material-nextjs": "^6.4.3",

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

@@ -35,7 +35,7 @@ import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
 import { coursePageView, programPageView, programView } from "@/common/urls"
 import { mitxonlineUrl } from "@/common/mitxonline"
-import { useAddToBasket, useClearBasket } from "api/mitxonline-hooks/baskets"
+import { useReplaceBasketItem } from "api/mitxonline-hooks/baskets"
 import { EnrollmentStatus, getBestRun, getEnrollmentStatus } from "./helpers"
 import {
   CourseWithCourseRunsSerializerV2,
@@ -527,20 +527,14 @@ const UpgradeBanner: React.FC<
   onError,
   ...others
 }) => {
-  const addToBasket = useAddToBasket()
-  const clearBasket = useClearBasket()
+  const replaceBasketItem = useReplaceBasketItem()
 
   const handleUpgradeClick = async (e: React.MouseEvent<HTMLAnchorElement>) => {
     e.preventDefault()
     if (!productId) return
 
     try {
-      // Reset mutation state to allow retry after error
-      addToBasket.reset()
-      clearBasket.reset()
-
-      await clearBasket.mutateAsync()
-      await addToBasket.mutateAsync(productId)
+      await replaceBasketItem.mutateAsync(productId)
     } catch (error) {
       onError?.(error as Error)
     }