adjust the logic to use response codes added to the mitxonline attach endpoint

Author: gumaerc

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

@@ -32,7 +32,13 @@ const organizationQueries = {
 const useB2BAttachMutation = (opts: B2bApiB2bAttachCreateRequest) => {
   const queryClient = useQueryClient()
   return useMutation({
-    mutationFn: () => b2bApi.b2bAttachCreate(opts),
+    mutationFn: async () => {
+      const response = await b2bApi.b2bAttachCreate(opts)
+      // 200 (already attached) indicates user already attached to all contracts
+      // 201 (successfully attached) is success
+      // 404 (invalid or expired code) will be thrown as error by axios
+      return response
+    },
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["mitxonline"] })
     },

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

@@ -67,29 +67,14 @@ describe("EnrollmentCodePage", () => {
     })
   })
 
-  test("Redirects to dashboard on successful attachment", async () => {
+  test("Redirects to dashboard on successful attachment (201 status)", async () => {
     setMockResponse.get(urls.userMe.get(), {
       [Permission.Authenticated]: true,
     })
 
-    const initialOrg = factories.organizations.organization({})
-    const newOrg = factories.organizations.organization({})
-    const initialMitxUser = factories.user.user({
-      b2b_organizations: [initialOrg],
-    })
-    const updatedMitxUser = factories.user.user({
-      b2b_organizations: [initialOrg, newOrg],
-    })
-
-    // First call returns initial user, subsequent calls return updated user
-    let callCount = 0
-    setMockResponse.get(b2bUrls.userMe.get(), () => {
-      callCount++
-      return callCount === 1 ? initialMitxUser : updatedMitxUser
-    })
-
     const attachUrl = b2bUrls.b2bAttach.b2bAttachView("test-code")
-    setMockResponse.post(attachUrl, updatedMitxUser)
+    // 201 status indicates successful attachment to new contract(s)
+    setMockResponse.post(attachUrl, {}, { code: 201 })
 
     renderWithProviders(<EnrollmentCodePage code="test-code" />, {
       url: commonUrls.B2B_ATTACH_VIEW,
@@ -104,47 +89,36 @@ describe("EnrollmentCodePage", () => {
     })
   })
 
-  test("Redirects to dashboard with error when b2b organizations don't change", async () => {
+  test("Redirects to dashboard when user already attached to all contracts (200 status)", async () => {
     setMockResponse.get(urls.userMe.get(), {
       [Permission.Authenticated]: true,
     })
 
-    const organization = factories.organizations.organization({})
-    const mitxUser = factories.user.user({
-      b2b_organizations: [organization],
-    })
-
-    setMockResponse.get(b2bUrls.userMe.get(), mitxUser)
-
-    const attachUrl = b2bUrls.b2bAttach.b2bAttachView("invalid-code")
-    setMockResponse.post(attachUrl, mitxUser)
+    const attachUrl = b2bUrls.b2bAttach.b2bAttachView("already-used-code")
+    // 200 status indicates user already attached to all contracts - still redirect to dashboard without error
+    setMockResponse.post(attachUrl, {}, { code: 200 })
 
-    renderWithProviders(<EnrollmentCodePage code="invalid-code" />, {
+    renderWithProviders(<EnrollmentCodePage code="already-used-code" />, {
       url: commonUrls.B2B_ATTACH_VIEW,
     })
 
     await waitFor(() => {
       expect(makeRequest).toHaveBeenCalledWith("post", attachUrl, undefined)
     })
 
-    expect(mockPush).toHaveBeenCalledWith(
-      commonUrls.DASHBOARD_HOME_ENROLLMENT_ERROR,
-    )
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(commonUrls.DASHBOARD_HOME)
+    })
   })
 
-  test("Redirects to dashboard with error when user has no organizations initially", async () => {
+  test("Redirects to dashboard with error for invalid code (404 status)", async () => {
     setMockResponse.get(urls.userMe.get(), {
       [Permission.Authenticated]: true,
     })
 
-    const mitxUser = factories.user.user({
-      b2b_organizations: [],
-    })
-
-    setMockResponse.get(b2bUrls.userMe.get(), mitxUser)
-
     const attachUrl = b2bUrls.b2bAttach.b2bAttachView("invalid-code")
-    setMockResponse.post(attachUrl, mitxUser)
+    // 404 status indicates invalid or expired enrollment code
+    setMockResponse.post(attachUrl, {}, { code: 404 })
 
     renderWithProviders(<EnrollmentCodePage code="invalid-code" />, {
       url: commonUrls.B2B_ATTACH_VIEW,
@@ -154,8 +128,10 @@ describe("EnrollmentCodePage", () => {
       expect(makeRequest).toHaveBeenCalledWith("post", attachUrl, undefined)
     })
 
-    expect(mockPush).toHaveBeenCalledWith(
-      commonUrls.DASHBOARD_HOME_ENROLLMENT_ERROR,
-    )
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(
+        commonUrls.DASHBOARD_HOME_ENROLLMENT_ERROR,
+      )
+    })
   })
 })

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

@@ -6,7 +6,6 @@ import { useB2BAttachMutation } from "api/mitxonline-hooks/organizations"
 import { userQueries } from "api/hooks/user"
 import { useQuery } from "@tanstack/react-query"
 import { useRouter } from "next-nprogress-bar"
-import { mitxUserQueries } from "api/mitxonline-hooks/user"
 
 type EnrollmentCodePage = {
   code: string
@@ -18,18 +17,7 @@ const InterstitialMessage = styled(Typography)(({ theme }) => ({
 }))
 
 const EnrollmentCodePage: React.FC<EnrollmentCodePage> = ({ code }) => {
-  const mitxOnlineUser = useQuery(mitxUserQueries.me())
-  const initialOrgsRef = React.useRef<number | null>(null)
   const [hasEnrolled, setHasEnrolled] = React.useState(false)
-
-  // Capture initial organization count once
-  if (
-    initialOrgsRef.current === null &&
-    mitxOnlineUser.data?.b2b_organizations
-  ) {
-    initialOrgsRef.current = mitxOnlineUser.data.b2b_organizations.length
-  }
-
   const router = useRouter()
 
   const enrollment = useB2BAttachMutation({
@@ -48,23 +36,17 @@ const EnrollmentCodePage: React.FC<EnrollmentCodePage> = ({ code }) => {
     }
   }, [user?.is_authenticated, hasEnrolled, enrollment])
 
-  // Handle redirect after mutation succeeds and query is refetched
+  // Handle redirect based on response status code
+  // 201: Successfully attached to new contract(s) -> redirect to dashboard
+  // 200: Already attached to all contracts -> redirect to dashboard
+  // 404: Invalid or expired code -> show error
   React.useEffect(() => {
-    if (enrollment.isSuccess && !enrollment.isPending) {
-      const currentOrgCount =
-        mitxOnlineUser.data?.b2b_organizations?.length ?? 0
-      if (initialOrgsRef.current === currentOrgCount) {
-        router.push(urls.DASHBOARD_HOME_ENROLLMENT_ERROR)
-      } else {
-        router.push(urls.DASHBOARD_HOME)
-      }
+    if (enrollment.isSuccess) {
+      router.push(urls.DASHBOARD_HOME)
+    } else if (enrollment.isError) {
+      router.push(urls.DASHBOARD_HOME_ENROLLMENT_ERROR)
     }
-  }, [
-    enrollment.isSuccess,
-    enrollment.isPending,
-    mitxOnlineUser.data?.b2b_organizations?.length,
-    router,
-  ])
+  }, [enrollment.isSuccess, enrollment.isError, router])
 
   React.useEffect(() => {
     if (userLoading) {