if enrollment code redemption fails, display an error

gumaerc · gumaerc · commit 2453e723aee5 · 2025-11-06T16:43:01.000-05:00
diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.test.tsx
@@ -239,4 +239,34 @@ describe("HomeContent", () => {
       }
     },
   )
+
+  test("Does not display enrollment error alert when query param is not present", async () => {
+    setupAPIs()
+    renderWithProviders(<HomeContent />)
+
+    await screen.findByRole("heading", {
+      name: "Your MIT Learning Journey",
+    })
+
+    expect(screen.queryByText("Enrollment Error")).not.toBeInTheDocument()
+  })
+
+  test("Displays enrollment error alert when query param is present", async () => {
+    setupAPIs()
+    renderWithProviders(<HomeContent />, {
+      url: "/dashboard?enrollment_error=1",
+    })
+
+    await screen.findByRole("heading", {
+      name: "Your MIT Learning Journey",
+    })
+
+    expect(screen.getByText("Enrollment Error")).toBeInTheDocument()
+    expect(
+      screen.getByText(
+        /The Enrollment Code is incorrect or no longer available/,
+      ),
+    ).toBeInTheDocument()
+    expect(screen.getByText("Contact Support")).toBeInTheDocument()
+  })
 })
diff --git a/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx b/frontends/main/src/app-pages/DashboardPage/HomeContent.tsx
@@ -1,9 +1,9 @@
 "use client"
 import React, { Suspense } from "react"
-import { ButtonLink } from "@mitodl/smoot-design"
+import { Alert, ButtonLink } from "@mitodl/smoot-design"
 import { ResourceTypeEnum } from "api"
-import { styled, Typography } from "ol-components"
-import { PROFILE } from "@/common/urls"
+import { Link, styled, Typography } from "ol-components"
+import { PROFILE, ENROLLMENT_ERROR_QUERY_PARAM } from "@/common/urls"
 import {
   TopPicksCarouselConfig,
   TopicCarouselConfig,
@@ -18,6 +18,7 @@ import { useFeatureFlagEnabled } from "posthog-js/react"
 import { FeatureFlags } from "@/common/feature_flags"
 import { useUserMe } from "api/hooks/user"
 import { OrganizationCards } from "./CoursewareDisplay/OrganizationCards"
+import { useSearchParams } from "next/navigation"
 
 const SubTitleText = styled(Typography)(({ theme }) => ({
   color: theme.custom.colors.darkGray2,
@@ -66,13 +67,20 @@ const TitleText = styled(Typography)(({ theme }) => ({
   },
 })) as typeof Typography
 
+const AlertBanner = styled(Alert)({
+  marginTop: "32px",
+})
+
 const HomeContent: React.FC = () => {
+  const searchParams = useSearchParams()
+  const enrollmentError = searchParams.get(ENROLLMENT_ERROR_QUERY_PARAM)
   const { isLoading: isLoadingProfile, data: user } = useUserMe()
   const topics = user?.profile?.preference_search_filters.topic
   const certification = user?.profile?.preference_search_filters.certification
   const showEnrollments = useFeatureFlagEnabled(
     FeatureFlags.EnrollmentDashboard,
   )
+  const supportEmail = process.env.NEXT_PUBLIC_MITOL_SUPPORT_EMAIL || ""
   return (
     <>
       <HomeHeader>
@@ -88,6 +96,21 @@ const HomeContent: React.FC = () => {
           </ButtonLink>
         </HomeHeaderRight>
       </HomeHeader>
+      {enrollmentError && (
+        <AlertBanner severity="error" closable={true}>
+          <Typography variant="subtitle2" component="span">
+            Enrollment Error
+          </Typography>
+          <Typography variant="body2" component="span">
+            {" - "}
+            The Enrollment Code is incorrect or no longer available.{" "}
+            <Link color="red" href={`mailto:${supportEmail}`}>
+              Contact Support
+            </Link>{" "}
+            for assistance.
+          </Typography>
+        </AlertBanner>
+      )}
       <OrganizationCards />
       {showEnrollments ? <EnrollmentDisplay /> : null}
       <Suspense>
diff --git a/frontends/main/src/app-pages/EnrollmentCodePage/EnrollmentCodePage.test.tsx b/frontends/main/src/app-pages/EnrollmentCodePage/EnrollmentCodePage.test.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { renderWithProviders, setMockResponse, waitFor } from "@/test-utils"
 import { makeRequest, urls } from "api/test-utils"
-import { urls as b2bUrls } from "api/mitxonline-test-utils"
+import { urls as b2bUrls, factories } from "api/mitxonline-test-utils"
 import * as commonUrls from "@/common/urls"
 import { Permission } from "api/hooks/user"
 import EnrollmentCodePage from "./EnrollmentCodePage"
@@ -25,6 +25,9 @@ describe("EnrollmentCodePage", () => {
       [Permission.Authenticated]: false,
     })
 
+    const mitxUser = factories.user.user()
+    setMockResponse.get(b2bUrls.userMe.get(), mitxUser)
+
     setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [], {
       code: 403,
     })
@@ -54,6 +57,9 @@ describe("EnrollmentCodePage", () => {
       [Permission.Authenticated]: true,
     })
 
+    const mitxUser = factories.user.user()
+    setMockResponse.get(b2bUrls.userMe.get(), mitxUser)
+
     setMockResponse.post(b2bUrls.b2bAttach.b2bAttachView("test-code"), [])
 
     renderWithProviders(<EnrollmentCodePage code="test-code" />, {
@@ -66,8 +72,24 @@ describe("EnrollmentCodePage", () => {
       [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, [])
+    setMockResponse.post(attachUrl, updatedMitxUser)
 
     renderWithProviders(<EnrollmentCodePage code="test-code" />, {
       url: commonUrls.B2B_ATTACH_VIEW,
@@ -77,6 +99,63 @@ describe("EnrollmentCodePage", () => {
       expect(makeRequest).toHaveBeenCalledWith("post", attachUrl, undefined)
     })
 
-    expect(mockPush).toHaveBeenCalledWith(commonUrls.DASHBOARD_HOME)
+    await waitFor(() => {
+      expect(mockPush).toHaveBeenCalledWith(commonUrls.DASHBOARD_HOME)
+    })
+  })
+
+  test("Redirects to dashboard with error when b2b organizations don't change", 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)
+
+    renderWithProviders(<EnrollmentCodePage code="invalid-code" />, {
+      url: commonUrls.B2B_ATTACH_VIEW,
+    })
+
+    await waitFor(() => {
+      expect(makeRequest).toHaveBeenCalledWith("post", attachUrl, undefined)
+    })
+
+    expect(mockPush).toHaveBeenCalledWith(
+      commonUrls.DASHBOARD_HOME_ENROLLMENT_ERROR,
+    )
+  })
+
+  test("Redirects to dashboard with error when user has no organizations initially", 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)
+
+    renderWithProviders(<EnrollmentCodePage code="invalid-code" />, {
+      url: commonUrls.B2B_ATTACH_VIEW,
+    })
+
+    await waitFor(() => {
+      expect(makeRequest).toHaveBeenCalledWith("post", attachUrl, undefined)
+    })
+
+    expect(mockPush).toHaveBeenCalledWith(
+      commonUrls.DASHBOARD_HOME_ENROLLMENT_ERROR,
+    )
   })
 })
diff --git a/frontends/main/src/app-pages/EnrollmentCodePage/EnrollmentCodePage.tsx b/frontends/main/src/app-pages/EnrollmentCodePage/EnrollmentCodePage.tsx
@@ -19,32 +19,52 @@ const InterstitialMessage = styled(Typography)(({ theme }) => ({
 
 const EnrollmentCodePage: React.FC<EnrollmentCodePage> = ({ code }) => {
   const mitxOnlineUser = useQuery(mitxUserQueries.me())
-  const userOrgs = structuredClone(mitxOnlineUser.data?.b2b_organizations || [])
+  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({
     enrollment_code: code,
   })
-  const router = useRouter()
 
   const { isLoading: userLoading, data: user } = useQuery({
     ...userQueries.me(),
     staleTime: 0,
   })
 
-  const enrollAsync = enrollment.mutateAsync
+  React.useEffect(() => {
+    if (user?.is_authenticated && !hasEnrolled && !enrollment.isPending) {
+      setHasEnrolled(true)
+      enrollment.mutate()
+    }
+  }, [user?.is_authenticated, hasEnrolled, enrollment])
 
+  // Handle redirect after mutation succeeds and query is refetched
   React.useEffect(() => {
-    if (user?.is_authenticated) {
-      enrollAsync().then(() => {
-        if (
-          userOrgs.length === mitxOnlineUser.data?.b2b_organizations?.length
-        ) {
-          router.push(urls.DASHBOARD_HOME_ENROLLMENT_ERROR)
-        } else {
-          router.push(urls.DASHBOARD_HOME)
-        }
-      })
+    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)
+      }
     }
-  }, [user?.is_authenticated, enrollAsync, router])
+  }, [
+    enrollment.isSuccess,
+    enrollment.isPending,
+    mitxOnlineUser.data?.b2b_organizations?.length,
+    router,
+  ])
 
   React.useEffect(() => {
     if (userLoading) {
diff --git a/frontends/main/src/common/urls.ts b/frontends/main/src/common/urls.ts
@@ -60,7 +60,8 @@ export const DASHBOARD_VIEW = "/dashboard/[tab]"
 const dashboardView = (tab: string) => generatePath(DASHBOARD_VIEW, { tab })
 
 export const DASHBOARD_HOME = "/dashboard"
-export const DASHBOARD_HOME_ENROLLMENT_ERROR = "/dashboard?enrollment_error=1"
+export const ENROLLMENT_ERROR_QUERY_PARAM = "enrollment_error"
+export const DASHBOARD_HOME_ENROLLMENT_ERROR = `/dashboard?${ENROLLMENT_ERROR_QUERY_PARAM}=1`
 export const MY_LISTS = dashboardView("my-lists")
 export const PROFILE = dashboardView("profile")
 export const SETTINGS = dashboardView("settings")
