richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/index.tsx

@@ -1,6 +1,7 @@
-import React, { useCallback, useEffect, useReducer } from 'react';
+import React, { useCallback, useEffect, useMemo, useReducer } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-
+import c from 'classnames';
+import { Button } from '@openfun/cunningham-react';
 import { Spinner } from 'components/Spinner';
 import { useSession } from 'contexts/SessionContext';
 import { CourseRun, Priority } from 'types';
@@ -10,6 +11,8 @@ import { handle } from 'utils/errors/handle';
 import { HttpError } from 'utils/errors/HttpError';
 import useCourseEnrollment from 'widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment';
 import { CourseRunUnenrollButton } from 'widgets/SyllabusCourseRunsList/components/CourseRunEnrollment/CourseRunUnenrollmentButton';
+import useDateRelative from 'hooks/useDateRelative';
+import { isEnrollment as isJoanieEnrollment } from 'types/Joanie';
 
 const messages = defineMessages({
   enroll: {
@@ -68,6 +71,11 @@ const messages = defineMessages({
     description: 'Helper text in the enroll button for non logged in users',
     id: 'components.CourseRunEnrollment.loginToEnroll',
   },
+  courseRunStartIn: {
+    defaultMessage: 'The course starts {relativeStartDate}',
+    description: 'Message displayed when user is enrolled but the course run is not started',
+    id: 'components.CourseRunEnrollment.courseRunStartIn',
+  },
 });
 
 interface CourseRunEnrollmentProps {
@@ -174,9 +182,11 @@ const reducer = ({ step, context }: ReducerState, action: ReducerAction): Reduce
 
 const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
   const { user, login } = useSession();
-  const { enrollmentIsActive, setEnrollment, canUnenroll, states } = useCourseEnrollment(
-    props.courseRun.resource_link,
-  );
+  const { enrollment, enrollmentIsActive, setEnrollment, canUnenroll, states } =
+    useCourseEnrollment(props.courseRun.resource_link);
+  const startDate = new Date(props.courseRun.start);
+  const isStarted = new Date() > startDate;
+  const relativeStartDate = useDateRelative(startDate);
 
   const [
     {
@@ -216,6 +226,16 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
     [courseRun, currentUser, dispatch, enrollmentIsActive],
   );
 
+  const LmsCourseLink = useMemo(() => {
+    if (states.isLoading) {
+      return null;
+    }
+    if (isJoanieEnrollment(enrollment)) {
+      return enrollment.course_run.resource_link;
+    }
+    return courseRun.resource_link;
+  }, [courseRun, enrollment]);
+
   useEffect(() => {
     dispatch({
       payload: { currentUser: user, isEnrolled: enrollmentIsActive },
@@ -238,9 +258,9 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
       );
     case step === Step.ANONYMOUS:
       return (
-        <button onClick={login} className="course-run-enrollment__cta">
+        <Button onClick={login} fullWidth>
           <FormattedMessage {...messages.loginToEnroll} />
-        </button>
+        </Button>
       );
     case step === Step.LOADING:
       return (
@@ -257,11 +277,12 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
     case step === Step.UNENROLLMENT_FAILED:
       return (
         <React.Fragment>
-          <button
+          <Button
             onClick={() => setEnroll(true)}
-            className={`course-run-enrollment__cta ${
-              step === Step.ENROLLING ? 'course-run-enrollment__cta--loading' : ''
-            }`}
+            className={c({
+              'course-run-enrollment__cta--loading': step === Step.ENROLLING,
+            })}
+            fullWidth
             aria-busy={step === Step.ENROLLING}
           >
             <FormattedMessage {...messages.enroll} />
@@ -271,7 +292,7 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
                 <Spinner />
               </span>
             ) : null}
-          </button>
+          </Button>
           {step === Step.ENROLLMENT_FAILED ? (
             <div className="course-run-enrollment__errortext">
               {error?.localizedMessage ? (
@@ -289,29 +310,36 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps> = (props) => {
         </React.Fragment>
       );
     case step === Step.ENROLLED:
-      return courseRun.starts_in_message ? (
+      return isStarted ? (
+        <div>
+          <Button
+            href={LmsCourseLink === null ? '#' : LmsCourseLink}
+            disabled={LmsCourseLink === null}
+            className="course-run-enrollment__cta"
+            fullWidth={true}
+          >
+            <FormattedMessage {...messages.goToCourse} />
+          </Button>
+          <div className="course-run-enrollment__helptext">
+            <FormattedMessage {...messages.enrolled} />
+            {canUnenroll && <CourseRunUnenrollButton onUnenroll={() => setEnroll(false)} />}
+          </div>
+        </div>
+      ) : (
         <div>
           {courseRun.dashboard_link ? (
-            <a href={courseRun.dashboard_link} className="course-run-enrollment__cta">
+            <Button href={courseRun.dashboard_link} className="course-run-enrollment__cta">
               <FormattedMessage {...messages.enrolled} />
-            </a>
+            </Button>
           ) : (
             <p className="course-run-enrollment__helptext">
               <FormattedMessage {...messages.enrolled} />
             </p>
           )}
           {canUnenroll && <CourseRunUnenrollButton onUnenroll={() => setEnroll(false)} />}
-          <p className="course-run-enrollment__helptext">{courseRun.starts_in_message}</p>
-        </div>
-      ) : (
-        <div>
-          <a href={courseRun.resource_link} className="course-run-enrollment__cta">
-            <FormattedMessage {...messages.goToCourse} />
-          </a>
-          <div className="course-run-enrollment__helptext">
-            <FormattedMessage {...messages.enrolled} />
-            {canUnenroll && <CourseRunUnenrollButton onUnenroll={() => setEnroll(false)} />}
-          </div>
+          <p className="course-run-enrollment__helptext">
+            <FormattedMessage {...messages.courseRunStartIn} values={{ relativeStartDate }} />
+          </p>
         </div>
       );
   }

package/js/widgets/SyllabusCourseRunsList/components/CourseRunItemWithEnrollment/index.tsx

@@ -33,6 +33,7 @@ const CourseRunItemWithEnrollment = ({ item }: Props) => {
   return (
     <>
       {enrollmentIsActive ? (
+        // eslint-disable-next-line jsx-a11y/control-has-associated-label
         <a href={item.resource_link} title={intl.formatMessage(messages.goToCourse)}>
           <CourseRunItem item={item} />
         </a>

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/_styles.scss

@@ -1,6 +1,3 @@
-.button.user-wishlist-button {
-  width: 100%;
-}
 .user-wishlist-button__error {
   color: r-theme-val(course-detail, subheader-run-feedback-color);
   margin-top: rem-calc(8px);

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/hooks/useCourseWish/index.spec.tsx

@@ -11,6 +11,7 @@ import {
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import { useCourseWish } from '.';
 
 jest.mock('utils/context', () => ({
@@ -57,7 +58,7 @@ describe('useCourseWish', () => {
     await waitFor(() => expect(result.current.states.fetching).toBe(true));
     await act(async () => {
       responseDeferred.resolve({
-        status: 200,
+        status: HttpStatusCode.OK,
         body: {
           status: false,
         },
@@ -73,7 +74,7 @@ describe('useCourseWish', () => {
   it('adds a course wish', async () => {
     const urlWishlist = `https://joanie.test/api/v1.0/courses/${course.code}/wish/`;
     fetchMock.get(urlWishlist, {
-      status: 200,
+      status: HttpStatusCode.OK,
       body: {
         status: false,
       },
@@ -85,9 +86,9 @@ describe('useCourseWish', () => {
 
     // We dont care about POST request return values,
     // react-query will refetch data using the GET url.
-    fetchMock.post(urlWishlist, 200);
+    fetchMock.post(urlWishlist, HttpStatusCode.OK);
     fetchMock.get(urlWishlist, {
-      status: 200,
+      status: HttpStatusCode.OK,
       body: {
         status: true,
       },
@@ -96,7 +97,8 @@ describe('useCourseWish', () => {
     result.current.methods.create(course.code);
     await waitFor(() => expect(result.current.states.fetching).toBe(false));
 
-    expect(fetchMock.called(urlWishlist, { method: 'POST' }));
+    expect(fetchMock.called(urlWishlist, { method: 'POST' })).toBe(true);
+    expect(fetchMock.called(urlWishlist, { method: 'GET' })).toBe(true);
     expect(result.current.states.error).toBe(undefined);
     await waitFor(() =>
       expect(JSON.stringify(result.current.item)).toBe(JSON.stringify({ status: true })),
@@ -106,7 +108,7 @@ describe('useCourseWish', () => {
   it('removes a course to user wishlist', async () => {
     const url = `https://joanie.test/api/v1.0/courses/${course.code}/wish/`;
     fetchMock.get(url, {
-      status: 200,
+      status: HttpStatusCode.OK,
       body: {
         status: true,
       },
@@ -116,9 +118,9 @@ describe('useCourseWish', () => {
     });
     fetchMock.restore();
 
-    fetchMock.delete(url, 200);
+    fetchMock.delete(url, HttpStatusCode.OK);
     fetchMock.get(url, {
-      status: 200,
+      status: HttpStatusCode.OK,
       body: {
         status: false,
       },
@@ -127,7 +129,8 @@ describe('useCourseWish', () => {
     result.current.methods.delete(course.code!);
     await waitFor(() => expect(result.current.states.fetching).toBe(false));
 
-    expect(fetchMock.called(url, { method: 'DELETE' }));
+    expect(fetchMock.called(url, { method: 'DELETE' })).toBe(true);
+    expect(fetchMock.called(url, { method: 'GET' })).toBe(true);
     expect(result.current.states.error).toBe(undefined);
     expect(JSON.stringify(result.current.item)).toBe(JSON.stringify({ status: false }));
   });

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.login.spec.tsx

@@ -7,14 +7,13 @@ import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
-import {
-  RichieContextFactory as mockRichieContextFactory,
-  CourseLightFactory,
-} from 'utils/test/factories/richie';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { SessionProvider } from 'contexts/SessionContext';
-import { Course } from 'types/Course';
+import { HttpStatusCode } from 'utils/errors/HttpError';
+import { CourseLight } from 'types/Joanie';
+import { CourseLightFactory } from 'utils/test/factories/joanie';
 import CourseWishButton from '.';
 
 jest.mock('utils/context', () => ({
@@ -30,7 +29,7 @@ jest.mock('utils/context', () => ({
   }).one(),
 }));
 
-const renderButton = (course: Course) =>
+const renderButton = (course: CourseLight) =>
   render(
     <IntlProvider locale="en">
       <QueryClientProvider client={createTestQueryClient({ user: true })}>
@@ -60,7 +59,7 @@ describe('CourseWishButton', () => {
 
   it('renders a notify me button', async () => {
     fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, {
-      status: 200,
+      status: HttpStatusCode.OK,
       body: {
         status: false,
       },
@@ -79,11 +78,11 @@ describe('CourseWishButton', () => {
     nbApiCalls += 1; // useUserWishlistCourses inital fetch
     expect(fetchMock.calls().length).toBe(nbApiCalls);
 
-    fetchMock.post(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, 200);
+    fetchMock.post(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, HttpStatusCode.OK);
     fetchMock.get(
       `https://joanie.test/api/v1.0/courses/${course.code}/wish/`,
       {
-        status: 200,
+        status: HttpStatusCode.OK,
         body: {
           status: true,
         },
@@ -103,7 +102,7 @@ describe('CourseWishButton', () => {
 
   it('renders a "do not notify me" button', async () => {
     fetchMock.get(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, {
-      status: 200,
+      status: HttpStatusCode.OK,
       body: {
         status: true,
       },
@@ -127,11 +126,14 @@ describe('CourseWishButton', () => {
     // We dont care about POST request return values,
     // react-query will refetch data using the GET url.
 
-    fetchMock.delete(`https://joanie.test/api/v1.0/courses/${course.code}/wish/`, 200);
+    fetchMock.delete(
+      `https://joanie.test/api/v1.0/courses/${course.code}/wish/`,
+      HttpStatusCode.OK,
+    );
     fetchMock.get(
       `https://joanie.test/api/v1.0/courses/${course.code}/wish/`,
       {
-        status: 200,
+        status: HttpStatusCode.OK,
         body: {
           status: false,
         },

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.logout.spec.tsx

@@ -7,15 +7,13 @@ import fetchMock from 'fetch-mock';
 import { IntlProvider } from 'react-intl';
 import { QueryClientProvider } from '@tanstack/react-query';
 import userEvent from '@testing-library/user-event';
-import {
-  CourseLightFactory,
-  RichieContextFactory as mockRichieContextFactory,
-} from 'utils/test/factories/richie';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import JoanieApiProvider from 'contexts/JoanieApiContext';
 import { SessionProvider } from 'contexts/SessionContext';
 import { location } from 'utils/indirection/window';
-import { Course } from 'types/Course';
+import { CourseLightFactory } from 'utils/test/factories/joanie';
+import { CourseLight } from 'types/Joanie';
 import CourseWishButton from '.';
 
 jest.mock('utils/indirection/window', () => ({
@@ -38,7 +36,7 @@ jest.mock('utils/context', () => ({
   }).one(),
 }));
 
-const renderButton = (course: Course) =>
+const renderButton = (course: CourseLight) =>
   render(
     <IntlProvider locale="en">
       <QueryClientProvider client={createTestQueryClient({ user: null })}>

package/js/widgets/SyllabusCourseRunsList/components/CourseWishButton/index.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
-import { Button } from 'components/Button';
+import { Button } from '@openfun/cunningham-react';
 import { Spinner } from 'components/Spinner';
 import { useSession } from 'contexts/SessionContext';
-import { Course } from 'types/Course';
+import { CourseLight } from 'types/Joanie';
 import { useCourseWish } from './hooks/useCourseWish';
 
 const messages = defineMessages({
@@ -37,7 +37,7 @@ enum ComponentStates {
 }
 
 export interface Props {
-  course: Course;
+  course: CourseLight;
 }
 
 const CourseWishButton = ({ course }: Props) => {
@@ -71,7 +71,7 @@ const CourseWishButton = ({ course }: Props) => {
       <Button
         color="primary"
         onClick={isWished ? removeFromWishlist : addToWishlist}
-        className="user-wishlist-button"
+        fullWidth
         disabled={componentState === ComponentStates.LOADING}
         {...(componentState === ComponentStates.ERROR && {
           'aria-describedby': 'user-wishlist-error',
@@ -89,7 +89,7 @@ const CourseWishButton = ({ course }: Props) => {
     <Button
       color="primary"
       onClick={login}
-      className="user-wishlist-button"
+      fullWidth
       disabled={componentState === ComponentStates.LOADING}
     >
       <FormattedMessage {...messages.logMe} />

package/js/widgets/SyllabusCourseRunsList/components/SyllabusAsideList/index.tsx

@@ -1,9 +1,9 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import React from 'react';
 import { CourseRun, Priority } from 'types';
-import { Course } from 'types/Course';
 import { SyllabusSimpleCourseRunsList } from 'widgets/SyllabusCourseRunsList/components/SyllabusSimpleCourseRunsList';
 import { SyllabusCourseRun } from 'widgets/SyllabusCourseRunsList/components/SyllabusCourseRun';
+import { CourseLight } from 'types/Joanie';
 
 const messages = defineMessages({
   otherCourseRuns: {
@@ -57,7 +57,7 @@ export const SyllabusAsideList = ({
   maxArchivedCourseRuns,
 }: {
   courseRuns: CourseRun[];
-  course: Course;
+  course: CourseLight;
   maxArchivedCourseRuns: number;
 }) => {
   const intl = useIntl();

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRun/index.tsx

@@ -1,14 +1,14 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { CourseRun, CourseRunDisplayMode } from 'types';
 import useDateFormat from 'hooks/useDateFormat';
-import { Course } from 'types/Course';
-import { extractResourceId, isJoanieProduct } from 'api/lms/joanie';
-import CourseProductItem from 'widgets/CourseProductItem';
+import { extractResourceId, isJoanieResourceLinkProduct } from 'api/lms/joanie';
 import { findLmsBackend } from 'api/configuration';
 import { StringHelper } from 'utils/StringHelper';
-import { DjangoCMSPluginCourseRun, DjangoCMSTemplate } from 'components/DjangoCMSTemplate';
-import CourseRunEnrollment from 'widgets/SyllabusCourseRunsList/components/CourseRunEnrollment';
 import { IntlHelper } from 'utils/IntlHelper';
+import { DjangoCMSPluginCourseRun, DjangoCMSTemplate } from 'components/DjangoCMSTemplate';
+import { CourseLight } from 'types/Joanie';
+import CourseRunEnrollment from '../CourseRunEnrollment';
+import CourseProductItem from '../CourseProductItem';
 
 const messages = defineMessages({
   enrollment: {
@@ -41,6 +41,12 @@ const messages = defineMessages({
 const OpenedCourseRun = ({ courseRun }: { courseRun: CourseRun }) => {
   const formatDate = useDateFormat();
   const intl = useIntl();
+  const enrollmentStart = courseRun.enrollment_start
+    ? formatDate(courseRun.enrollment_start)
+    : '...';
+  const enrollmentEnd = courseRun.enrollment_end ? formatDate(courseRun.enrollment_end) : '...';
+  const start = courseRun.start ? formatDate(courseRun.start) : '...';
+  const end = courseRun.end ? formatDate(courseRun.end) : '...';
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -52,8 +58,8 @@ const OpenedCourseRun = ({ courseRun }: { courseRun: CourseRun }) => {
           <FormattedMessage
             {...messages.runPeriod}
             values={{
-              startDate: formatDate(courseRun.enrollment_start),
-              endDate: formatDate(courseRun.enrollment_end),
+              startDate: enrollmentStart,
+              endDate: enrollmentEnd,
             }}
           />
         </dd>
@@ -64,8 +70,8 @@ const OpenedCourseRun = ({ courseRun }: { courseRun: CourseRun }) => {
           <FormattedMessage
             {...messages.runPeriod}
             values={{
-              startDate: formatDate(courseRun.start),
-              endDate: formatDate(courseRun.end),
+              startDate: start,
+              endDate: end,
             }}
           />
         </dd>
@@ -90,15 +96,15 @@ export const SyllabusCourseRun = ({
   course,
 }: {
   courseRun: CourseRun;
-  course: Course;
+  course: CourseLight;
 }) => {
   return (
     <DjangoCMSTemplate plugin={DjangoCMSPluginCourseRun(courseRun)}>
       <div className="course-detail__run-descriptions course-detail__run-descriptions--course_and_search">
-        {isJoanieProduct(courseRun) ? (
+        {isJoanieResourceLinkProduct(courseRun.resource_link) ? (
           <CourseProductItem
-            productId={extractResourceId(courseRun)!}
-            courseCode={course.code!}
+            productId={extractResourceId(courseRun.resource_link, 'product')!}
+            course={course}
             compact={courseRun.display_mode === CourseRunDisplayMode.COMPACT}
           />
         ) : (

package/js/widgets/SyllabusCourseRunsList/components/SyllabusSimpleCourseRunsList/index.tsx

@@ -50,6 +50,7 @@ export const SyllabusSimpleCourseRunsList = ({
               })}
             >
               {run.snapshot ? (
+                // eslint-disable-next-line jsx-a11y/control-has-associated-label
                 <a href={run.snapshot}>
                   <CourseRunItem item={run} />
                 </a>

package/js/widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index.spec.tsx

@@ -14,6 +14,7 @@ import BaseSessionProvider from 'contexts/SessionContext/BaseSessionProvider';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
 import { User } from 'types/User';
 import useCourseEnrollment from 'widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 
 jest.mock('utils/context', () => ({
   __esModule: true,
@@ -52,7 +53,7 @@ describe('useCourseEnrollment', () => {
 
     fetchMock.get(
       `${endpoint}/api/enrollment/v1/enrollment/${user.username},${courseRun.resource_link}`,
-      401,
+      HttpStatusCode.UNAUTHORIZED,
     );
 
     const { result } = renderHook(() => useCourseEnrollment(courseRun.resource_link), {

package/js/widgets/SyllabusCourseRunsList/hooks/useCourseEnrollment/index.ts

@@ -21,34 +21,28 @@ const useCourseEnrollment = (resourceLink: string) => {
   const queryClient = useQueryClient();
   const EnrollmentAPI = EnrollmentApiInterface(resourceLink);
 
-  const [{ data: enrollment, isError, isLoading }, queryKeys] = useSessionQuery(
+  const [{ data: enrollment, isError, isLoading: isEnrollmentLoading }, queryKey] = useSessionQuery(
     ['enrollment', resourceLink],
     async () => {
       return EnrollmentAPI.get(resourceLink, user!);
     },
   );
 
-  const [{ data: isActive, refetch: refetchIsActive }] = useSessionQuery(
-    [...queryKeys, 'is_active'],
-    async () => EnrollmentAPI.isEnrolled(enrollment),
-    {
+  const [{ data: isActive, refetch: refetchIsActive, isLoading: isActiveLoading }] =
+    useSessionQuery([...queryKey, 'is_active'], async () => EnrollmentAPI.isEnrolled(enrollment), {
       // Enrollment is null if it has been fetched
-      enabled: !!user && enrollment !== undefined && !isLoading,
-    },
-  );
-
-  const { mutateAsync } = useSessionMutation(
-    (activeEnrollment: boolean = true) =>
+      enabled: !!user && enrollment !== undefined && !isEnrollmentLoading,
+    });
+  const { mutateAsync } = useSessionMutation({
+    mutationFn: (activeEnrollment: boolean = true) =>
       EnrollmentAPI.set(resourceLink, user!, enrollment, activeEnrollment),
-    {
-      mutationKey: queryKeys,
-      onSuccess: async () => {
-        await queryClient.invalidateQueries(queryKeys, { exact: true });
-        // After enrolls the user, then send enrolled event to the web analytics handler.
-        WebAnalyticsAPIHandler()?.sendEnrolledEvent(resourceLink);
-      },
+    mutationKey: queryKey,
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({ queryKey, exact: true });
+      // After enrolls the user, then send enrolled event to the web analytics handler.
+      WebAnalyticsAPIHandler()?.sendEnrolledEvent(resourceLink);
     },
-  );
+  });
 
   useEffect(() => {
     refetchIsActive();
@@ -63,6 +57,7 @@ const useCourseEnrollment = (resourceLink: string) => {
       errors: {
         get: isError,
       },
+      isLoading: isEnrollmentLoading || isActiveLoading,
     },
   };
 };