course/program enrollment dialog

env/backend.env

@@ -68,3 +68,4 @@ USERINFO_URL=http://kc.ol.local:8066/realms/ol-local/protocol/openid-connect/use
 
 # Disable all celery tasks by default in local dev
 CELERY_BEAT_DISABLED=True
+SESSION_COOKIE_DOMAIN="odl.local"

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

@@ -3,10 +3,11 @@ import { useMutation, useQueryClient } from "@tanstack/react-query"
 import { b2bApi, courseRunEnrollmentsApi } from "../../clients"
 import {
   B2bApiB2bEnrollCreateRequest,
+  EnrollmentsApiUserEnrollmentsCreateV2Request,
   EnrollmentsApiEnrollmentsPartialUpdateRequest,
 } from "@mitodl/mitxonline-api-axios/v2"
 
-const useCreateEnrollment = () => {
+const useCreateB2bEnrollment = () => {
   const queryClient = useQueryClient()
   return useMutation({
     mutationFn: (opts: B2bApiB2bEnrollCreateRequest) =>
@@ -19,6 +20,19 @@ const useCreateEnrollment = () => {
   })
 }
 
+const useCreateEnrollment = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (opts: EnrollmentsApiUserEnrollmentsCreateV2Request) =>
+      courseRunEnrollmentsApi.userEnrollmentsCreateV2(opts),
+    onSettled: () => {
+      queryClient.invalidateQueries({
+        queryKey: enrollmentKeys.courseRunEnrollmentsList(),
+      })
+    },
+  })
+}
+
 const useUpdateEnrollment = () => {
   const queryClient = useQueryClient()
   return useMutation({
@@ -48,6 +62,7 @@ const useDestroyEnrollment = () => {
 export {
   enrollmentQueries,
   enrollmentKeys,
+  useCreateB2bEnrollment,
   useCreateEnrollment,
   useUpdateEnrollment,
   useDestroyEnrollment,

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

@@ -8,6 +8,7 @@ import type {
 } from "@mitodl/mitxonline-api-axios/v2"
 import { faker } from "@faker-js/faker/locale/en"
 import { UniqueEnforcer } from "enforce-unique"
+import { has } from "lodash"
 
 const uniqueCourseId = new UniqueEnforcer()
 const uniqueCourseRunId = new UniqueEnforcer()
@@ -122,7 +123,9 @@ const course: PartialFactory<CourseWithCourseRunsSerializerV2> = (
     Array.from({ length: faker.number.int({ min: 1, max: 3 }) }).map(() =>
       courseRun(),
     )
-  const nextRunId = overrides.next_run_id ?? faker.helpers.arrayElement(runs).id
+  const nextRunId = has(overrides, "next_run_id")
+    ? (overrides.next_run_id ?? null)
+    : faker.helpers.arrayElement(runs).id
   const defaults: CourseWithCourseRunsSerializerV2 = {
     id: uniqueCourseId.enforce(() => faker.number.int()),
     title: faker.lorem.words(3),

frontends/api/src/mitxonline/test-utils/urls.ts

@@ -18,7 +18,9 @@ const countries = {
 }
 
 const enrollment = {
-  enrollmentsList: () => `${API_BASE_URL}/api/v1/enrollments/`,
+  /**
+   * @deprecated
+   */
   courseEnrollment: (id?: number) =>
     `${API_BASE_URL}/api/v1/enrollments/${id ? `${id}/` : ""}`,
   enrollmentsListV2: () => `${API_BASE_URL}/api/v2/enrollments/`,

frontends/jest-shared-setup.ts

@@ -4,14 +4,19 @@ import "cross-fetch/polyfill"
 import { resetAllWhenMocks } from "jest-when"
 import * as matchers from "jest-extended"
 import { mockRouter } from "ol-test-utilities/mocks/nextNavigation"
+import { setDefaultTimezone } from "ol-test-utilities"
 
 expect.extend(matchers)
 
+setDefaultTimezone("UTC")
+
 // env vars
 process.env.NEXT_PUBLIC_MITOL_API_BASE_URL =
-  "http://api.test.learn.odl.local:8063"
+  "http://api.test.learn.odl.local:8065"
 process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL =
-  "http://api.test.mitxonline.odl.local:8053"
+  "http://api.test.learn.odl.local:8065/mitxonline"
+process.env.NEXT_PUBLIC_MITX_ONLINE_LEGACY_BASE_URL =
+  "http://mitxonline.odl.local:8065"
 process.env.NEXT_PUBLIC_ORIGIN = "http://test.learn.odl.local:8062"
 process.env.NEXT_PUBLIC_EMBEDLY_KEY = "fake-embedly-key"
 

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

@@ -3,6 +3,7 @@ import {
   renderWithProviders,
   screen,
   setMockResponse,
+  setupLocationMock,
   user,
   within,
 } from "@/test-utils"
@@ -62,23 +63,7 @@ describe.each([
 ])("DashboardCard $display", ({ testId }) => {
   const getCard = () => screen.getByTestId(testId)
 
-  const originalLocation = window.location
-
-  beforeAll(() => {
-    Object.defineProperty(window, "location", {
-      configurable: true,
-      enumerable: true,
-      value: { ...originalLocation, assign: jest.fn() },
-    })
-  })
-
-  afterAll(() => {
-    Object.defineProperty(window, "location", {
-      configurable: true,
-      enumerable: true,
-      value: originalLocation,
-    })
-  })
+  setupLocationMock()
 
   test("It shows course title and links to marketingUrl if titleAction is marketing and enrolled", async () => {
     setupUserApis()

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

@@ -37,7 +37,7 @@ import {
   UnenrollDialog,
 } from "./DashboardDialogs"
 import NiceModal from "@ebay/nice-modal-react"
-import { useCreateEnrollment } from "api/mitxonline-hooks/enrollment"
+import { useCreateB2bEnrollment } from "api/mitxonline-hooks/enrollment"
 import { mitxUserQueries } from "api/mitxonline-hooks/user"
 import { useQuery } from "@tanstack/react-query"
 import { programView } from "@/common/urls"
@@ -177,7 +177,7 @@ const getDefaultContextMenuItems = (
 
 const useOneClickEnroll = () => {
   const mitxOnlineUser = useQuery(mitxUserQueries.me())
-  const createEnrollment = useCreateEnrollment()
+  const createEnrollment = useCreateB2bEnrollment()
   const userCountry = mitxOnlineUser.data?.legal_address?.country
   const userYearOfBirth = mitxOnlineUser.data?.user_profile?.year_of_birth
   const showJustInTimeDialog = !userCountry || !userYearOfBirth

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

@@ -3,6 +3,7 @@ import {
   renderWithProviders,
   screen,
   setMockResponse,
+  setupLocationMock,
   user,
   within,
 } from "@/test-utils"
@@ -157,23 +158,7 @@ describe("JustInTimeDialog", () => {
     }
   }
 
-  const originalLocation = window.location
-
-  beforeAll(() => {
-    Object.defineProperty(window, "location", {
-      configurable: true,
-      enumerable: true,
-      value: { ...originalLocation, assign: jest.fn() },
-    })
-  })
-
-  afterAll(() => {
-    Object.defineProperty(window, "location", {
-      configurable: true,
-      enumerable: true,
-      value: originalLocation,
-    })
-  })
+  setupLocationMock()
 
   type SetupJitOptions = {
     userOverrides?: PartialDeep<MitxUser>

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

@@ -15,7 +15,7 @@ import { useQuery } from "@tanstack/react-query"
 import NiceModal, { muiDialogV5 } from "@ebay/nice-modal-react"
 import { useFormik } from "formik"
 import {
-  useCreateEnrollment,
+  useCreateB2bEnrollment,
   useDestroyEnrollment,
   useUpdateEnrollment,
 } from "api/mitxonline-hooks/enrollment"
@@ -196,7 +196,7 @@ const JustInTimeDialogInner: React.FC<{ href: string; readableId: string }> = ({
 }) => {
   const { data: countries } = useQuery(mitxUserQueries.countries())
   const updateUser = useUpdateUserMutation()
-  const createEnrollment = useCreateEnrollment()
+  const createEnrollment = useCreateB2bEnrollment()
   const user = useQuery(mitxUserQueries.me())
   const modal = NiceModal.useModal()
 

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/test-utils.ts

@@ -290,7 +290,6 @@ function setupOrgDashboardMocks(
   )
 
   // Empty defaults
-  setMockResponse.get(mitxonline.urls.enrollment.enrollmentsList(), [])
   setMockResponse.get(mitxonline.urls.programEnrollments.enrollmentsList(), [])
   setMockResponse.get(
     mitxonline.urls.programEnrollments.enrollmentsListV2(),

frontends/main/src/app-pages/DashboardPage/OrganizationContent.test.tsx

@@ -29,7 +29,6 @@ const makeGrade = factories.enrollment.grade
 
 describe("OrganizationContent", () => {
   beforeEach(() => {
-    setMockResponse.get(urls.enrollment.enrollmentsList(), [])
     setMockResponse.get(urls.enrollment.enrollmentsListV2(), [])
     setMockResponse.get(urls.programEnrollments.enrollmentsList(), [])
     setMockResponse.get(urls.programEnrollments.enrollmentsListV2(), [])
@@ -145,7 +144,6 @@ describe("OrganizationContent", () => {
       }),
     ]
     // Override the default empty enrollments for this test
-    setMockResponse.get(urls.enrollment.enrollmentsList(), enrollments)
     setMockResponse.get(urls.enrollment.enrollmentsListV2(), enrollments)
 
     renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)
@@ -170,11 +168,11 @@ describe("OrganizationContent", () => {
 
       // Check based on the actual enrollment status, not array position
       if (course.enrollment?.status === EnrollmentStatus.Enrolled) {
-        expect(indicator).toHaveTextContent("Enrolled")
+        expect(indicator).toHaveTextContent(/^Enrolled$/)
       } else if (course.enrollment?.status === EnrollmentStatus.Completed) {
-        expect(indicator).toHaveTextContent("Completed")
+        expect(indicator).toHaveTextContent(/^Completed$/)
       } else {
-        expect(indicator).toHaveTextContent("Not Enrolled")
+        expect(indicator).toHaveTextContent(/^Not Enrolled$/)
       }
     })
   })
@@ -754,9 +752,25 @@ describe("OrganizationContent", () => {
           )?.id,
           course: { id: courses[0].id, title: courses[0].title },
         },
-        grades: [], // No grades = enrolled but not completed
+        b2b_contract_id: contracts[0].id,
+        b2b_organization_id: contracts[0].organization,
+        certificate: { uuid: faker.string.uuid(), link: faker.internet.url() },
+      }),
+      factories.enrollment.courseEnrollment({
+        run: {
+          id: courses[1].courseruns.find(
+            (r) => r.b2b_contract === contractIds[0],
+          )?.id,
+          course: { id: courses[1].id, title: courses[1].title },
+        },
+        b2b_contract_id: contracts[0].id,
+        b2b_organization_id: contracts[0].organization,
+        certificate: null,
+        grades: [],
       }),
     ]
+    // Override enrollments for this test
+    setMockResponse.get(urls.enrollment.enrollmentsListV2(), enrollments)
 
     const program = factories.programs.program({
       courses: courses.map((c) => c.id),
@@ -771,24 +785,22 @@ describe("OrganizationContent", () => {
       contracts,
     )
 
-    // Override enrollments for this test
-    setMockResponse.get(urls.enrollment.enrollmentsList(), enrollments)
-
     renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)
 
     const cards = await within(
       await screen.findByTestId("org-program-root"),
     ).findAllByTestId("enrollment-card-desktop")
 
+    expect(cards.length).toBe(3)
     // First card should show enrolled status
-    const firstCardStatus = within(cards[0]).getByTestId("enrollment-status")
-    expect(firstCardStatus).toHaveTextContent("Enrolled")
+    const cardStatus0 = within(cards[0]).getByTestId("enrollment-status")
+    expect(cardStatus0).toHaveTextContent(/^Completed$/)
 
-    // Remaining cards should show not enrolled
-    for (let i = 1; i < cards.length; i++) {
-      const cardStatus = within(cards[i]).getByTestId("enrollment-status")
-      expect(cardStatus).toHaveTextContent("Not Enrolled")
-    }
+    const cardStatus1 = within(cards[1]).getByTestId("enrollment-status")
+    expect(cardStatus1).toHaveTextContent(/^Enrolled$/)
+
+    const cardStatus2 = within(cards[2]).getByTestId("enrollment-status")
+    expect(cardStatus2).toHaveTextContent(/^Not Enrolled$/)
   })
 
   test("shows the not found screen if the organization is not found by orgSlug", async () => {
@@ -987,7 +999,6 @@ describe("OrganizationContent", () => {
       contracts,
     )
 
-    setMockResponse.get(urls.enrollment.enrollmentsList(), [enrollment])
     setMockResponse.get(urls.enrollment.enrollmentsListV2(), [enrollment])
 
     renderWithProviders(<OrganizationContent orgSlug={orgX.slug} />)

frontends/main/src/app-pages/DashboardPage/OrganizationRedirect.test.tsx

@@ -20,7 +20,6 @@ describe("OrganizationRedirect", () => {
   beforeEach(() => {
     mockReplace.mockClear()
     localStorage.clear()
-    setMockResponse.get(urls.enrollment.enrollmentsList(), [])
     setMockResponse.get(urls.programEnrollments.enrollmentsList(), [])
     setMockResponse.get(urls.contracts.contractsList(), [])
   })