add "just in time" dialog (#2530)

* update currentuser to use userme, add country listing and user me mutation hooks, and add the first draft of the just in time modal

* use our select components

* fix the tests

* use "dialog" instead of "modal"

* add tests and fix some existing ones by mocking the countries api

* fix CI testing issue

* fix select placeholder color

* update API package and remove first name and last name from updates

* use yup schema, errortext

* convert mitxonline user queries to queryOptions

* fix ts error

* fix country display

* fix enrollment

* remove unncessary check

* add tests

---------

Co-authored-by: Chris Chudzicki <christopher.chudzicki@gmail.com>

Author: gumaerc

frontends/api/package.json

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

frontends/api/src/mitxonline/clients.ts

@@ -9,6 +9,7 @@ import {
   UsersApi,
   ProgramEnrollmentsApi,
   PagesApi,
+  CountriesApi,
 } from "@mitodl/mitxonline-api-axios/v2"
 import axios from "axios"
 
@@ -25,6 +26,7 @@ const BASE_PATH =
   process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL?.replace(/\/+$/, "") ?? ""
 
 const usersApi = new UsersApi(undefined, BASE_PATH, axiosInstance)
+const countriesApi = new CountriesApi(undefined, BASE_PATH, axiosInstance)
 const b2bApi = new B2bApi(undefined, BASE_PATH, axiosInstance)
 const programsApi = new ProgramsApi(undefined, BASE_PATH, axiosInstance)
 const programCollectionsApi = new ProgramCollectionsApi(
@@ -63,6 +65,7 @@ const pagesApi = new PagesApi(undefined, BASE_PATH, axiosInstance)
 
 export {
   usersApi,
+  countriesApi,
   b2bApi,
   courseRunEnrollmentsApi,
   programEnrollmentsApi,

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

@@ -1,18 +1,58 @@
-import { useQuery } from "@tanstack/react-query"
-import { usersApi } from "../../clients"
+import {
+  queryOptions,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query"
+import { countriesApi, usersApi } from "../../clients"
 import type { User } from "@mitodl/mitxonline-api-axios/v2"
+import { UsersApiUsersMePartialUpdateRequest } from "@mitodl/mitxonline-api-axios/v2"
 
-const useMitxOnlineCurrentUser = (opts: { enabled?: boolean } = {}) =>
-  useQuery({
-    queryKey: ["mitxonline", "currentUser"],
-    queryFn: async (): Promise<User> => {
-      const response = await usersApi.usersCurrentUserRetrieve()
-      return {
-        ...response.data,
-      }
+const userKeys = {
+  root: ["mitxonline", "users"] as const,
+  me: () => [...userKeys.root, "me"] as const,
+  countries: () => ["mitxonline", "countries"] as const,
+}
+
+const queries = {
+  me: () =>
+    queryOptions({
+      queryKey: userKeys.me(),
+      queryFn: async () => {
+        const response = await usersApi.usersMeRetrieve()
+        return response.data
+      },
+    }),
+  countries: () =>
+    queryOptions({
+      queryKey: userKeys.countries(),
+      queryFn: async () => {
+        const response = await countriesApi.countriesList()
+        return response.data
+      },
+    }),
+}
+
+/**
+ * @deprecated Prefer direct use of queries.me()
+ */
+const useMitxOnlineUserMe = (opts: { enabled?: boolean } = {}) =>
+  useQuery({ ...queries.me(), ...opts })
+
+const useUpdateUserMutation = () => {
+  const queryClient = useQueryClient()
+  return useMutation({
+    mutationFn: (opts: UsersApiUsersMePartialUpdateRequest) =>
+      usersApi.usersMePartialUpdate(opts),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: userKeys.me() })
     },
-    ...opts,
   })
+}
 
-export { useMitxOnlineCurrentUser }
+export {
+  queries as mitxUserQueries,
+  useMitxOnlineUserMe,
+  useUpdateUserMutation,
+}
 export type { User as MitxOnlineUser }

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

@@ -244,6 +244,7 @@ const programPageItem: PartialFactory<ProgramPageItem> = (override) => {
           name: faker.person.fullName(),
           title_1: faker.person.jobTitle(),
           title_2: faker.person.jobTitle(),
+          title_3: "",
           organization: "Massachusetts Institute of Technology",
           signature_image: faker.image.urlLoremFlickr({
             width: 200,

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

@@ -5,14 +5,16 @@ import type {
   ProgramCollectionsApiProgramCollectionsListRequest,
   ProgramsApiProgramsListV2Request,
 } from "@mitodl/mitxonline-api-axios/v2"
-import { RawAxiosRequestConfig } from "axios"
 import { queryify } from "ol-test-utilities"
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_MITX_ONLINE_BASE_URL
 
-const currentUser = {
-  get: (opts?: RawAxiosRequestConfig) =>
-    `${API_BASE_URL}/api/v0/users/current_user/${queryify(opts)}`,
+const userMe = {
+  get: () => `${API_BASE_URL}/api/v0/users/me`,
+}
+
+const countries = {
+  list: () => `${API_BASE_URL}/api/v0/countries/`,
 }
 
 const enrollment = {
@@ -83,7 +85,8 @@ const certificates = {
 export {
   b2b,
   b2bAttach,
-  currentUser,
+  userMe,
+  countries,
   enrollment,
   programs,
   programCollections,

frontends/api/src/test-utils/mockAxios.ts

@@ -14,9 +14,13 @@ type RequestMaker = (
   body?: unknown,
 ) => Promise<PartialAxiosResponse>
 
-const alwaysError: RequestMaker = (method, url, _body) => {
+const alwaysError: RequestMaker = (method, url, body) => {
   const msg = `No response specified for ${method} ${url}`
   console.error(msg)
+  if (body) {
+    console.error("and body:")
+    console.error(body)
+  }
   throw new Error(msg)
 }
 

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.9.26",
+    "@mitodl/mitxonline-api-axios": "^2025.9.30",
     "@mitodl/smoot-design": "^6.17.1",
     "@next/bundle-analyzer": "^14.2.15",
     "@react-pdf/renderer": "^4.3.0",
@@ -62,6 +62,7 @@
     "next-router-mock": "^1.0.2",
     "ol-test-utilities": "0.0.0",
     "ts-jest": "^29.2.4",
+    "type-fest": "^5.0.1",
     "typescript": "^5"
   }
 }

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

@@ -30,7 +30,7 @@ describe("B2BAttachPage", () => {
       [Permission.Authenticated]: false,
     })
 
-    setMockResponse.get(mitxOnlineUrls.currentUser.get(), null)
+    setMockResponse.get(mitxOnlineUrls.userMe.get(), null)
     setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [])
 
     renderWithProviders(<B2BAttachPage code="test-code" />, {
@@ -58,7 +58,7 @@ describe("B2BAttachPage", () => {
     })
 
     setMockResponse.get(
-      mitxOnlineUrls.currentUser.get(),
+      mitxOnlineUrls.userMe.get(),
       mitxOnlineFactories.user.user(),
     )
 
@@ -88,7 +88,7 @@ describe("B2BAttachPage", () => {
       [Permission.Authenticated]: true,
     })
 
-    setMockResponse.get(mitxOnlineUrls.currentUser.get(), mitxOnlineUser)
+    setMockResponse.get(mitxOnlineUrls.userMe.get(), mitxOnlineUser)
 
     setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [])
 

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

@@ -3,7 +3,7 @@ import React from "react"
 import { styled, Breadcrumbs, Container, Typography } from "ol-components"
 import * as urls from "@/common/urls"
 import { useB2BAttachMutation } from "api/mitxonline-hooks/organizations"
-import { useMitxOnlineCurrentUser } from "api/mitxonline-hooks/user"
+import { useMitxOnlineUserMe } from "api/mitxonline-hooks/user"
 import { userQueries } from "api/hooks/user"
 import { useQuery } from "@tanstack/react-query"
 import { useRouter } from "next-nprogress-bar"
@@ -31,7 +31,7 @@ const B2BAttachPage: React.FC<B2BAttachPageProps> = ({ code }) => {
     ...userQueries.me(),
     staleTime: 0,
   })
-  const { data: mitxOnlineUser } = useMitxOnlineCurrentUser()
+  const { data: mitxOnlineUser } = useMitxOnlineUserMe()
 
   React.useEffect(() => {
     attach?.()

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

@@ -5,15 +5,18 @@ import {
   setMockResponse,
   user,
   within,
-  expectWindowNavigation,
 } from "@/test-utils"
 import * as mitxonline from "api/mitxonline-test-utils"
+import {
+  urls as testUrls,
+  factories as testFactories,
+  mockAxiosInstance,
+} from "api/test-utils"
 import { DashboardCard, getDefaultContextMenuItems } from "./DashboardCard"
 import { dashboardCourse } from "./test-utils"
 import { faker } from "@faker-js/faker/locale/en"
 import moment from "moment"
 import { EnrollmentMode, EnrollmentStatus } from "./types"
-import { mockAxiosInstance } from "api/test-utils"
 
 const pastDashboardCourse: typeof dashboardCourse = (...overrides) => {
   return dashboardCourse(
@@ -49,6 +52,14 @@ const futureDashboardCourse: typeof dashboardCourse = (...overrides) => {
   )
 }
 
+beforeEach(() => {
+  // Mock user API call
+  const user = testFactories.user.user()
+  const mitxUser = mitxonline.factories.user.user()
+  setMockResponse.get(testUrls.userMe.get(), user)
+  setMockResponse.get(mitxonline.urls.userMe.get(), mitxUser)
+})
+
 describe.each([
   { display: "desktop", testId: "enrollment-card-desktop" },
   { display: "mobile", testId: "enrollment-card-mobile" },
@@ -476,19 +487,44 @@ describe.each([
         status: EnrollmentStatus.NotEnrolled,
       },
     })
+
+    // Mock user without country and year_of_birth to trigger JustInTimeDialog
+    const baseUser = mitxonline.factories.user.user()
+    const mitxUserWithoutRequiredFields = {
+      ...baseUser,
+      legal_address: { ...baseUser.legal_address, country: undefined },
+      user_profile: { ...baseUser.user_profile, year_of_birth: undefined },
+    }
+    setMockResponse.get(
+      mitxonline.urls.userMe.get(),
+      mitxUserWithoutRequiredFields,
+    )
+
     setMockResponse.post(
       mitxonline.urls.b2b.courseEnrollment(course.coursewareId ?? undefined),
       { result: "b2b-enroll-success", order: 1 },
     )
+    // Mock countries data needed by JustInTimeDialog
+    setMockResponse.get(mitxonline.urls.countries.list(), [
+      { code: "US", name: "United States" },
+      { code: "CA", name: "Canada" },
+    ])
+
     renderWithProviders(<DashboardCard dashboardResource={course} />)
     const card = getCard()
     const coursewareButton = within(card).getByTestId("courseware-button")
 
-    await expectWindowNavigation(async () => {
-      await user.click(coursewareButton)
+    // Now the button should show the JustInTimeDialog instead of directly enrolling
+    await user.click(coursewareButton)
+
+    // Verify the JustInTimeDialog appeared
+    const dialog = await screen.findByRole("dialog", {
+      name: "Just a Few More Details",
     })
+    expect(dialog).toBeInTheDocument()
 
-    expect(mockAxiosInstance.request).toHaveBeenCalledWith(
+    // The enrollment API should NOT be called yet (until dialog is completed)
+    expect(mockAxiosInstance.request).not.toHaveBeenCalledWith(
       expect.objectContaining({
         method: "POST",
         url: mitxonline.urls.b2b.courseEnrollment(