Fix verified enrollment for program-as-course hierarchy

[ChristopherChudzicki]

What are the relevant tickets?

• Closes https://github.com/mitodl/hq/issues/10649

Description (What does it do?)

Fixes verified enrollment for courses nested inside a "program-as-course" (aka courselike program, crogram).

Problem: When a user has a verified enrollment in a grandparent program (e.g., program-v1:UAI+B2C) but no enrollment yet in a child courselike program (program-v1:UAI+B2C.1), clicking "Start Course" on a grandchild module was opening the enrollment dialog instead of using the verified enrollment API. The backend needs both the parent and grandparent program IDs to create the enrollment chain.

Solution:

• Updated the verifiedProgramEnrollments API call to use the new signature (request_body: string[] instead of program_id), per Release 1.143.2 mitxonline#3420
• ProgramAsCourseCard now accepts an optional ancestorProgramEnrollment prop (the grandparent's enrollment) and assembles parentProgramIds from courseProgram.readable_id + the ancestor's readable_id
• ModuleCard receives simple parentProgramIds: string[] and useVerifiedEnrollment: boolean — it doesn't need to know about enrollment objects
• EnrollmentDisplay passes the grandparent's enrollment as ancestorProgramEnrollment on the program dashboard

Also includes:

• Phase 1 dashboard card refactor from #10521 (ProgramAsCourseCard, ModuleCard, ProgressBadge, helpers)
• Deduplicated render paths in EnrollmentExpandCollapse via renderResource extraction
• Replaced local EnrollmentMode constants with isVerifiedEnrollmentMode helper across both ModuleCard and DashboardCard
• Test quality improvements: removed hardcoded IDs/titles, use invariant() instead of non-null assertions, minimal factory overrides

How can this be tested?

1. Set up a UAI-style program hierarchy: grandparent program → courselike child programs → module courses
   • https://gist.github.com/ChristopherChudzicki/c8dcbf30b86f168a2ebea0df7d21cda9 is an option
2. Create a verified enrollment in the grandparent program only (e.g., via django admin or via a fake cybersource credit card on the program page)
3. Navigate to the program dashboard for the grandparent
4. Click "Start Course" on a module inside a courselike program
5. You should get an enrollment in the course and the parent program, both should be verified enrollments (check in django admin or api response)

[Copilot]

Pull request overview

Fixes one-click verified enrollment behavior for “program-as-course” hierarchies on the dashboard by ensuring the verified enrollment API receives the full parent/ancestor program chain, and refactors related dashboard card plumbing/tests accordingly.

Changes:

• Pass ancestor program enrollment context down to program-as-course module cards and convert it into parentProgramIds + useVerifiedEnrollment.
• Update verified program enrollment API usage to the new signature (request_body: string[]) and new URL shape (courserun-only).
• Refactor dashboard rendering paths and strengthen tests around verified enrollment scenarios.

Reviewed changes

Copilot reviewed 11 out of 12 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
yarn.lock	Switches @mitodl/mitxonline-api-axios resolution to a GitHub tarball source.
frontends/main/package.json	Pins @mitodl/mitxonline-api-axios to a GitHub tarball URL.
frontends/api/package.json	Pins @mitodl/mitxonline-api-axios to a GitHub tarball URL.
frontends/api/src/mitxonline/test-utils/urls.ts	Updates verified enrollment endpoint helper to courserun-only URL.
frontends/main/src/common/mitxonline.ts	Adds isVerifiedEnrollmentMode helper.
frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ProgramAsCourseCard.tsx	Adds ancestor enrollment support and passes parentProgramIds/useVerifiedEnrollment to module cards.
frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/ModuleCard.tsx	Switches verified enrollment to request_body: string[] and threads new props through enrollment handler.
frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/EnrollmentDisplay.tsx	Passes ancestor enrollment on program dashboard and refactors rendering; updates module-id derivation.
frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/DashboardCard.tsx	Updates verified enrollment mutation to the new request shape; uses isVerifiedEnrollmentMode.
frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/*.test.tsx	Updates/extends tests for verified enrollment chain behavior and removes hardcoded test data.

[gumaerc]

I was able to create a verified program enrollment and subsequently enroll in modules in my "course-like-program." I didn't notice anything super worrying in the code, just a few small things we could look at before merging. One of them is not included in your changes, but maybe something we should change. In the enrollment hooks at frontends/api/src/mitxonline/hooks/enrollment.index.ts we have:

const useCreateVerifiedProgramEnrollment = () => {
  const queryClient = useQueryClient()
  return useMutation({
    mutationFn: (
      opts: VerifiedProgramEnrollmentsApiVerifiedProgramEnrollmentsCreateRequest,
    ) => verifiedProgramEnrollmentsApi.verifiedProgramEnrollmentsCreate(opts),
    onSettled: () => {
      queryClient.invalidateQueries({
        queryKey: enrollmentKeys.courseRunEnrollmentsList(),
      })
    },
  })
}

This only invalidates the course run enrollments list, but now that we're displaying programs as part of other programs, maybe we should invalidate the program enrollment list as well?

We could also address the linting warning below:

[gumaerc]

The warnings below don't seem that critical, but could cause unnecessary re-rendering so maybe we should memoize requiredProgramList?

[ChristopherChudzicki]

Honestly, I think this is more an indicator that we were over-eager in using useMemo and useCallback. They generally aren't relevant unless you have child components using React.memo, which ours usually don't.