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.

Author: jkachel

frontends/api/src/mitxonline/clients.ts

@@ -9,6 +9,7 @@ import {
   UsersApi,
 } from "@mitodl/mitxonline-api-axios/v2"
 import axios from "axios"
+import { AxiosInstance } from "axios"
 
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL,
@@ -22,6 +23,22 @@ 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)
@@ -38,6 +55,7 @@ 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,
@@ -55,6 +73,7 @@ export {
   usersApi,
   b2bApi,
   courseRunEnrollmentsApi,
+  b2bAttachApi,
   programsApi,
   programCollectionsApi,
   coursesApi,

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,7 @@
 import { B2bApiB2bOrganizationsRetrieveRequest } from "@mitodl/mitxonline-api-axios/v0"
-import { OrganizationPage } from "@mitodl/mitxonline-api-axios/v2"
-import { queryOptions } from "@tanstack/react-query"
-import { b2bApi } from "../../clients"
+import { OrganizationPage } from "@mitodl/mitxonline-api-axios/v1"
+import { queryOptions, useMutation } from "@tanstack/react-query"
+import { b2bApi, b2bAttachApi } from "../../clients"
 
 const organizationKeys = {
   root: ["mitxonline", "organizations"],
@@ -22,4 +22,12 @@ const organizationQueries = {
     }),
 }
 
-export { organizationQueries, organizationKeys }
+const useB2BAttachMutation = (code: string) => {
+  return useMutation({
+    mutationFn: (data?: unknown) => {
+      return b2bAttachApi.attach(code, data).then((res) => res.data)
+    },
+  })
+}
+
+export { organizationQueries, organizationKeys, useB2BAttachMutation }

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

@@ -0,0 +1,46 @@
+"use client"
+import React from "react"
+import { Breadcrumbs, Container, Typography } from "ol-components"
+import * as urls from "@/common/urls"
+import { useB2BAttachMutation } from "api/mitxonline-hooks/organizations"
+
+type B2BAttachPageProps = {
+  code: string;
+};
+
+const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
+  // This is an interstitial. The user sits here until we validate the code,
+  // then we toss them to the dashboard.
+
+  const { mutate: attach, isSuccess } = useB2BAttachMutation(code)
+
+  React.useEffect(() => {
+    // Trigger the attach mutation when the component mounts
+    console.log("attempting to attach code", code)
+    attach(code)
+  }, [attach, code])
+
+  if (isSuccess) {
+    //window.history.replaceState(null, "", urls.DASHBOARD_HOME);
+  }
+
+  return (
+    <Container>
+      <Breadcrumbs
+        variant="light"
+        ancestors={[{ href: urls.HOME, label: "Home" }]}
+        current="Use Enrollment Code"
+      />
+
+      <Typography component="h1" variant="h3">
+        Please Wait
+      </Typography>
+
+      <Typography>
+        {isSuccess ? <>Your enrollment code {code} has been validated.</> : <>Please wait while we validate your enrollment code {code}</>}
+      </Typography>
+    </Container>
+  )
+}
+
+export default B2BAttachPage

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

@@ -0,0 +1,55 @@
+import React from "react"
+import { renderWithProviders, setMockResponse } from "@/test-utils"
+import { urls } from "api/test-utils"
+import * as commonUrls from "@/common/urls"
+import { ForbiddenError } from "@/common/errors"
+import { Permission } from "api/hooks/user"
+import { useFeatureFlagEnabled } from "posthog-js/react"
+import CartPage from "./CartPage"
+import { allowConsoleErrors } from "ol-test-utilities"
+
+jest.mock("posthog-js/react")
+const mockedUseFeatureFlagEnabled = jest.mocked(useFeatureFlagEnabled)
+
+const oldWindowLocation = window.location
+
+beforeAll(() => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete (window as any).location
+
+  window.location = Object.defineProperties({} as Location, {
+    ...Object.getOwnPropertyDescriptors(oldWindowLocation),
+    assign: {
+      configurable: true,
+      value: jest.fn(),
+    },
+  })
+})
+
+afterAll(() => {
+  window.location = oldWindowLocation
+})
+
+describe("CartPage", () => {
+  ;["on", "off"].forEach((testCase: string) => {
+    test(`Renders when logged in and feature flag is ${testCase}`, async () => {
+      setMockResponse.get(urls.userMe.get(), {
+        [Permission.Authenticated]: true,
+      })
+      mockedUseFeatureFlagEnabled.mockReturnValue(testCase === "on")
+
+      if (testCase === "off") {
+        allowConsoleErrors()
+        expect(() =>
+          renderWithProviders(<CartPage />, {
+            url: commonUrls.ECOMMERCE_CART,
+          }),
+        ).toThrow(ForbiddenError)
+      } else {
+        renderWithProviders(<CartPage />, {
+          url: commonUrls.ECOMMERCE_CART,
+        })
+      }
+    })
+  })
+})

frontends/main/src/app/attach/[code]/page.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+import { Metadata } from "next"
+import { standardizeMetadata } from "@/common/metadata"
+import invariant from "tiny-invariant"
+
+import type { PageParams } from "@/app/types"
+import B2BAttachPage from "@/app-pages/B2BAttachPage/B2BAttachPage"
+
+export const metadata: Metadata = standardizeMetadata({
+  title: "Use Enrollment Code",
+})
+
+const Page: React.FC<PageParams<object, { code: string }>> = async ({
+  params
+}) => {
+  const resolved = await params
+  invariant(resolved?.code, "code is required")
+  return <B2BAttachPage code={resolved?.code} />
+}
+
+export default Page

frontends/main/src/common/urls.ts

@@ -167,3 +167,7 @@ export const SEARCH_LEARNING_MATERIAL = querifiedSearchUrl({
 })
 
 export const ECOMMERCE_CART = "/cart/" as const
+
+export const B2B_ATTACH_VIEW = "/attach/[code]"
+export const b2bAttachView = (code: string) =>
+  generatePath(B2B_ATTACH_VIEW, { code: code })