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

Author: gumaerc

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/clients.ts

@@ -8,7 +8,7 @@ import {
   ProgramCertificatesApi,
   UsersApi,
 } from "@mitodl/mitxonline-api-axios/v2"
-import axios, { AxiosInstance } from "axios"
+import axios from "axios"
 
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL,
@@ -22,25 +22,6 @@ const axiosInstance = axios.create({
 const BASE_PATH =
   process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL?.replace(/\/+$/, "") ?? ""
 
-class B2BAttachApi {
-  private axiosInstance: AxiosInstance
-  private basePath: string
-
-  constructor(
-    _config: unknown = undefined,
-    basePath: string,
-    axiosInstance: AxiosInstance,
-  ) {
-    this.basePath = basePath
-    this.axiosInstance = axiosInstance
-  }
-
-  async attach(code: string, data?: unknown, options?: unknown) {
-    const url = `${this.basePath}/api/v0/b2b/attach/${encodeURIComponent(code)}/`
-    return this.axiosInstance.post(url, data, options || undefined)
-  }
-}
-
 const usersApi = new UsersApi(undefined, BASE_PATH, axiosInstance)
 const b2bApi = new B2bApi(undefined, BASE_PATH, axiosInstance)
 const programsApi = new ProgramsApi(undefined, BASE_PATH, axiosInstance)
@@ -57,7 +38,6 @@ const programCertificatesApi = new ProgramCertificatesApi(
 )
 
 const coursesApi = new CoursesApi(undefined, BASE_PATH, axiosInstance)
-const b2bAttachApi = new B2BAttachApi(undefined, BASE_PATH, axiosInstance)
 
 const courseCertificatesApi = new CourseCertificatesApi(
   undefined,
@@ -75,7 +55,6 @@ export {
   usersApi,
   b2bApi,
   courseRunEnrollmentsApi,
-  b2bAttachApi,
   programsApi,
   programCollectionsApi,
   coursesApi,

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/v1"
-import { queryOptions, useMutation } from "@tanstack/react-query"
-import { b2bApi, b2bAttachApi } from "../../clients"
+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,10 +29,14 @@ const organizationQueries = {
     }),
 }
 
-const useB2BAttachMutation = (code: string) => {
+const useB2BAttachMutation = (opts: B2bApiB2bAttachCreateRequest) => {
+  const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: (data?: unknown) => {
-      return b2bAttachApi.attach(code, data).then((res) => res.data)
+    mutationFn: () => b2bApi.b2bAttachCreate(opts),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: organizationKeys.organizationsRetrieve(),
+      })
     },
   })
 }

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

@@ -1,31 +1,24 @@
 import React from "react"
-import { renderWithProviders, setMockResponse } from "@/test-utils"
+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"
 
-const oldWindowLocation = window.location
+// Mock Next.js redirect function
+jest.mock("next/navigation", () => ({
+  redirect: jest.fn(),
+}))
 
-beforeAll(() => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  delete (window as any).location
+const mockRedirect = jest.mocked(redirect)
 
-  window.location = Object.defineProperties({} as Location, {
-    ...Object.getOwnPropertyDescriptors(oldWindowLocation),
-    assign: {
-      configurable: true,
-      value: jest.fn(),
-    },
+describe("B2BAttachPage", () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
   })
-})
 
-afterAll(() => {
-  window.location = oldWindowLocation
-})
-
-describe("B2BAttachPage", () => {
   test("Renders when logged in", async () => {
     setMockResponse.get(urls.userMe.get(), {
       [Permission.Authenticated]: true,
@@ -37,4 +30,21 @@ describe("B2BAttachPage", () => {
       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

@@ -1,5 +1,6 @@
 "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"
@@ -14,12 +15,18 @@ const InterstitialMessage = styled(Typography)(({ theme }) => ({
 }))
 
 const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
-  const { mutate: attach, isSuccess } = useB2BAttachMutation(code)
+  const {
+    mutate: attach,
+    isSuccess,
+    isPending,
+  } = useB2BAttachMutation({
+    enrollment_code: code,
+  })
 
-  React.useEffect(() => attach(code), [attach, code])
+  React.useEffect(() => attach(), [attach])
 
   if (isSuccess) {
-    window.history.replaceState(null, "", urls.DASHBOARD_HOME)
+    redirect(urls.DASHBOARD_HOME)
   }
 
   return (
@@ -29,8 +36,9 @@ const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
         ancestors={[{ href: urls.HOME, label: "Home" }]}
         current="Use Enrollment Code"
       />
-
-      <InterstitialMessage>Validating code "{code}"...</InterstitialMessage>
+      {isPending && (
+        <InterstitialMessage>Validating code "{code}"...</InterstitialMessage>
+      )}
     </Container>
   )
 }