B2B Provisioning: Add interstitial page to process redemption code retrieval (#2422)

* Adds (really pretty ugly) interstitial page, routing, and cobbles together a sample API hook

The hook does hit the right endpoint but it's a stand-in until the API PR gets merged.

* Adding more tests, fixing a few things, making the design a little bit less terrible

* Re-enable the redirect (disabled to grab a screenshot)

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* formatting

* update api client and use the new attach function, also update interstitial page to use it and the nextjs redirect function instead of setting window.location directly

* fix upstream issue with course with course runs return type changing

* More upstream fixes

* use useEffect

* put attach in dependencies

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Carey Gumaer <[email protected]>

Author: 3 people

frontends/api/package.json

@@ -30,7 +30,7 @@
     "ol-test-utilities": "0.0.0"
   },
   "dependencies": {
-    "@mitodl/mitxonline-api-axios": "2025.8.6",
+    "@mitodl/mitxonline-api-axios": "2025.8.12",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.6.3"
   }

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

@@ -1,7 +1,7 @@
 import { queryOptions } from "@tanstack/react-query"
 import type {
   CoursesApiApiV2CoursesListRequest,
-  PaginatedV2CourseWithCourseRunsList,
+  PaginatedCourseWithCourseRunsSerializerV2List,
 } from "@mitodl/mitxonline-api-axios/v2"
 import { coursesApi } from "../../clients"
 
@@ -18,9 +18,10 @@ const coursesQueries = {
   coursesList: (opts?: CoursesApiApiV2CoursesListRequest) =>
     queryOptions({
       queryKey: coursesKeys.coursesList(opts),
-      queryFn: async (): Promise<PaginatedV2CourseWithCourseRunsList> => {
-        return coursesApi.apiV2CoursesList(opts).then((res) => res.data)
-      },
+      queryFn:
+        async (): Promise<PaginatedCourseWithCourseRunsSerializerV2List> => {
+          return coursesApi.apiV2CoursesList(opts).then((res) => res.data)
+        },
     }),
 }
 

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

@@ -1,3 +1,3 @@
-import { organizationQueries } from "./queries"
+import { organizationQueries, useB2BAttachMutation } from "./queries"
 
-export { organizationQueries }
+export { organizationQueries, useB2BAttachMutation }

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

@@ -1,7 +1,14 @@
-import { B2bApiB2bOrganizationsRetrieveRequest } from "@mitodl/mitxonline-api-axios/v0"
-import { OrganizationPage } from "@mitodl/mitxonline-api-axios/v2"
-import { queryOptions } from "@tanstack/react-query"
+import {
+  queryOptions,
+  useMutation,
+  useQueryClient,
+} from "@tanstack/react-query"
 import { b2bApi } from "../../clients"
+import {
+  OrganizationPage,
+  B2bApiB2bAttachCreateRequest,
+  B2bApiB2bOrganizationsRetrieveRequest,
+} from "@mitodl/mitxonline-api-axios/v2"
 
 const organizationKeys = {
   root: ["mitxonline", "organizations"],
@@ -22,4 +29,16 @@ const organizationQueries = {
     }),
 }
 
-export { organizationQueries, organizationKeys }
+const useB2BAttachMutation = (opts: B2bApiB2bAttachCreateRequest) => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: () => b2bApi.b2bAttachCreate(opts),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.organizationsRetrieve(),
+      })
+    },
+  })
+}
+
+export { organizationQueries, organizationKeys, useB2BAttachMutation }

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

@@ -1,14 +1,16 @@
 import { mergeOverrides, makePaginatedFactory } from "ol-test-utilities"
 import type { PartialFactory } from "ol-test-utilities"
-import type { V2CourseWithCourseRuns } from "@mitodl/mitxonline-api-axios/v2"
+import type { CourseWithCourseRunsSerializerV2 } from "@mitodl/mitxonline-api-axios/v2"
 import { faker } from "@faker-js/faker/locale/en"
 import { UniqueEnforcer } from "enforce-unique"
 
 const uniqueCourseId = new UniqueEnforcer()
 const uniqueCourseRunId = new UniqueEnforcer()
 
-const course: PartialFactory<V2CourseWithCourseRuns> = (overrides = {}) => {
-  const defaults: V2CourseWithCourseRuns = {
+const course: PartialFactory<CourseWithCourseRunsSerializerV2> = (
+  overrides = {},
+) => {
+  const defaults: CourseWithCourseRunsSerializerV2 = {
     id: uniqueCourseId.enforce(() => faker.number.int()),
     title: faker.lorem.words(3),
     readable_id: faker.lorem.slug(),
@@ -86,7 +88,7 @@ const course: PartialFactory<V2CourseWithCourseRuns> = (overrides = {}) => {
     ingest_content_files_for_ai: faker.datatype.boolean(),
   }
 
-  return mergeOverrides<V2CourseWithCourseRuns>(defaults, overrides)
+  return mergeOverrides<CourseWithCourseRunsSerializerV2>(defaults, overrides)
 }
 
 const courses = makePaginatedFactory(course)

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

@@ -46,8 +46,13 @@ const organization = {
     `${API_BASE_URL}/api/v0/b2b/organizations/${organizationSlug}/`,
 }
 
+const b2bAttach = {
+  b2bAttachView: (code: string) => `${API_BASE_URL}/api/v0/b2b/attach/${code}/`,
+}
+
 export {
   b2b,
+  b2bAttach,
   currentUser,
   enrollment,
   programs,

frontends/main/package.json

@@ -14,7 +14,7 @@
     "@emotion/cache": "^11.13.1",
     "@emotion/styled": "^11.11.0",
     "@mitodl/course-search-utils": "3.3.2",
-    "@mitodl/mitxonline-api-axios": "2025.8.6",
+    "@mitodl/mitxonline-api-axios": "2025.8.12",
     "@mitodl/smoot-design": "^6.10.0",
     "@next/bundle-analyzer": "^14.2.15",
     "@remixicon/react": "^4.2.0",

frontends/main/src/app-pages/B2BAttachPage/B2BAttachPage.test.tsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { renderWithProviders, setMockResponse, waitFor } from "@/test-utils"
+import { urls } from "api/test-utils"
+import { urls as b2bUrls } from "api/mitxonline-test-utils"
+import * as commonUrls from "@/common/urls"
+import { Permission } from "api/hooks/user"
+import B2BAttachPage from "./B2BAttachPage"
+import { redirect } from "next/navigation"
+
+// Mock Next.js redirect function
+jest.mock("next/navigation", () => ({
+  redirect: jest.fn(),
+}))
+
+const mockRedirect = jest.mocked(redirect)
+
+describe("B2BAttachPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test("Renders when logged in", async () => {
+    setMockResponse.get(urls.userMe.get(), {
+      [Permission.Authenticated]: true,
+    })
+
+    setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [])
+
+    renderWithProviders(<B2BAttachPage code="test-code" />, {
+      url: commonUrls.B2B_ATTACH_VIEW,
+    })
+  })
+
+  test("Redirects to dashboard on successful attachment", async () => {
+    setMockResponse.get(urls.userMe.get(), {
+      [Permission.Authenticated]: true,
+    })
+
+    setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [])
+
+    renderWithProviders(<B2BAttachPage code="test-code" />, {
+      url: commonUrls.B2B_ATTACH_VIEW,
+    })
+
+    // Wait for the mutation to complete and verify redirect was called
+    await waitFor(() => {
+      expect(mockRedirect).toHaveBeenCalledWith(commonUrls.DASHBOARD_HOME)
+    })
+  })
+})

frontends/main/src/app-pages/B2BAttachPage/B2BAttachPage.tsx

@@ -0,0 +1,50 @@
+"use client"
+import React from "react"
+import { redirect } from "next/navigation"
+import { styled, Breadcrumbs, Container, Typography } from "ol-components"
+import * as urls from "@/common/urls"
+import { useB2BAttachMutation } from "api/mitxonline-hooks/organizations"
+
+type B2BAttachPageProps = {
+  code: string
+}
+
+const InterstitialMessage = styled(Typography)(({ theme }) => ({
+  ...theme.typography.body1,
+  textAlign: "center",
+}))
+
+const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
+  const {
+    mutate: attach,
+    isSuccess,
+    isPending,
+  } = useB2BAttachMutation({
+    enrollment_code: code,
+  })
+
+  React.useEffect(() => {
+    attach?.()
+  }, [attach])
+
+  React.useEffect(() => {
+    if (isSuccess) {
+      redirect(urls.DASHBOARD_HOME)
+    }
+  }, [isSuccess])
+
+  return (
+    <Container>
+      <Breadcrumbs
+        variant="light"
+        ancestors={[{ href: urls.HOME, label: "Home" }]}
+        current="Use Enrollment Code"
+      />
+      {isPending && (
+        <InterstitialMessage>Validating code "{code}"...</InterstitialMessage>
+      )}
+    </Container>
+  )
+}
+
+export default B2BAttachPage

frontends/main/src/app-pages/DashboardPage/CoursewareDisplay/transform.ts

@@ -6,7 +6,7 @@
 
 import {
   CourseRunEnrollment,
-  V2CourseWithCourseRuns,
+  CourseWithCourseRunsSerializerV2,
   V2Program,
   V2ProgramCollection,
 } from "@mitodl/mitxonline-api-axios/v2"
@@ -72,7 +72,7 @@ const mitxonlineEnrollments = (data: CourseRunEnrollment[]) =>
   data.map((course) => mitxonlineEnrollment(course))
 
 const mitxonlineUnenrolledCourse = (
-  course: V2CourseWithCourseRuns,
+  course: CourseWithCourseRunsSerializerV2,
 ): DashboardCourse => {
   const run = course.courseruns.find((run) => run.id === course.next_run_id)
   return {
@@ -98,7 +98,7 @@ const mitxonlineUnenrolledCourse = (
 }
 
 const mitxonlineCourses = (raw: {
-  courses: V2CourseWithCourseRuns[]
+  courses: CourseWithCourseRunsSerializerV2[]
   enrollments: CourseRunEnrollment[]
 }) => {
   const enrollmentsByCourseId = groupBy(