richie-education 2.24.0 → 2.25.0-b2.dev101

package/js/components/SignContractButton/index.spec.tsx

@@ -0,0 +1,213 @@
+import { PropsWithChildren } from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from 'react-intl';
+import { MemoryRouter } from 'react-router-dom';
+import userEvent from '@testing-library/user-event';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { faker } from '@faker-js/faker';
+import {
+  ContractFactory,
+  CredentialOrderFactory,
+  NestedCredentialOrderFactory,
+} from 'utils/test/factories/joanie';
+import { RichieContextFactory as mockRichieContextFactory } from 'utils/test/factories/richie';
+import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import JoanieApiProvider from 'contexts/JoanieApiContext';
+import { Contract, CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import SignContractButton from '.';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockRichieContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://demo.endpoint' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint' },
+  }).one(),
+}));
+
+enum TestCase {
+  FROM_ORDER_WITH_CONTRACT = 'from order with a contract',
+  FROM_ORDER_WITHOUT_CONTRACT = 'from order without a contract',
+  FROM_CONTRACT = 'from contract',
+}
+interface FromOrderTestData {
+  testCase: TestCase.FROM_ORDER_WITH_CONTRACT | TestCase.FROM_ORDER_WITHOUT_CONTRACT;
+  OrderFactory: typeof CredentialOrderFactory;
+}
+interface FromContractTestData {
+  testCase: TestCase.FROM_CONTRACT;
+  OrderFactory: typeof NestedCredentialOrderFactory;
+}
+
+describe('<SignContractButton/>', () => {
+  describe.each<FromOrderTestData | FromContractTestData>([
+    {
+      testCase: TestCase.FROM_ORDER_WITH_CONTRACT,
+      OrderFactory: CredentialOrderFactory,
+    },
+    {
+      testCase: TestCase.FROM_ORDER_WITHOUT_CONTRACT,
+      OrderFactory: CredentialOrderFactory,
+    },
+    {
+      testCase: TestCase.FROM_CONTRACT,
+      OrderFactory: NestedCredentialOrderFactory,
+    },
+  ])('$testCase', ({ testCase, OrderFactory }) => {
+    let contract: undefined | Contract;
+    let order: CredentialOrder | NestedCredentialOrder;
+    const Wrapper = ({ children }: PropsWithChildren) => {
+      return (
+        <QueryClientProvider client={createTestQueryClient({ user: true })}>
+          <IntlProvider locale="en">
+            <JoanieApiProvider>
+              <MemoryRouter>{children}</MemoryRouter>
+            </JoanieApiProvider>
+          </IntlProvider>
+        </QueryClientProvider>
+      );
+    };
+
+    describe('with training contract not signed by the learner', () => {
+      beforeEach(() => {
+        if (testCase === TestCase.FROM_CONTRACT) {
+          contract = ContractFactory({ student_signed_on: null }).one();
+          order = contract.order as NestedCredentialOrder;
+        } else {
+          const orderContract =
+            testCase === TestCase.FROM_ORDER_WITH_CONTRACT
+              ? ContractFactory({ student_signed_on: null }).one()
+              : undefined;
+          order = OrderFactory({ contract: orderContract }).one();
+          contract = order.contract;
+        }
+      });
+
+      it('should display a link to the training contract when writable is set to false', () => {
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={false} />
+          </Wrapper>,
+        );
+        expect(screen.getByRole('link', { name: 'Sign' })).toBeInTheDocument();
+
+        expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+        expect(document.querySelector('div.ReactModalPortal')).not.toBeInTheDocument();
+      });
+
+      it('should display a button that open ContractFrame modal', async () => {
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={true} />
+          </Wrapper>,
+        );
+        const $signButton = screen.queryByRole('button', { name: 'Sign' });
+        expect($signButton).toBeInTheDocument();
+        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
+
+        expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+
+        const user = userEvent.setup();
+        await user.click($signButton!);
+
+        expect(screen.getByTestId('dashboard-contract-frame')).toBeInTheDocument();
+      });
+    });
+
+    describe('with training contract signed by the learner', () => {
+      beforeEach(() => {
+        if (testCase === TestCase.FROM_CONTRACT) {
+          contract = ContractFactory({ student_signed_on: faker.date.past().toISOString() }).one();
+          order = contract.order as NestedCredentialOrder;
+        } else {
+          order = OrderFactory({
+            contract: ContractFactory({ student_signed_on: faker.date.past().toISOString() }).one(),
+          }).one();
+          contract = order.contract;
+        }
+      });
+
+      it('should display render the sign training contract modal portal when writable is set to false', () => {
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={false} />
+          </Wrapper>,
+        );
+        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
+
+        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+      });
+
+      it('should neither display sign or download buttons, but ContractFrame should render', async () => {
+        if (testCase === TestCase.FROM_ORDER_WITHOUT_CONTRACT) {
+          // order without contract cannot have a signed contract
+          return;
+        }
+
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={true} />
+          </Wrapper>,
+        );
+
+        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
+
+        expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+      });
+    });
+
+    describe('with training contract signed by the learner and by organization', () => {
+      beforeEach(() => {
+        contract = ContractFactory({
+          student_signed_on: faker.date.past().toISOString(),
+          organization_signed_on: faker.date.past().toISOString(),
+        }).one();
+        if (testCase === TestCase.FROM_CONTRACT) {
+          order = contract.order as NestedCredentialOrder;
+        } else {
+          order = OrderFactory({
+            contract,
+          }).one();
+          contract = order.contract;
+        }
+      });
+
+      it('should display a download button when writable is set to false', () => {
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={false} />
+          </Wrapper>,
+        );
+        expect(screen.queryByRole('button', { name: 'Download' })).toBeInTheDocument();
+        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
+
+        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+      });
+
+      it('should display a button to download the training contract', async () => {
+        if (testCase === TestCase.FROM_ORDER_WITHOUT_CONTRACT) {
+          // order without contract cannot have a signed contract
+          return;
+        }
+
+        render(
+          <Wrapper>
+            <SignContractButton order={order} contract={contract} writable={true} />
+          </Wrapper>,
+        );
+
+        expect(screen.queryByRole('button', { name: 'Download' })).toBeInTheDocument();
+        expect(document.querySelector('div.ReactModalPortal')).toBeInTheDocument();
+
+        expect(screen.queryByRole('button', { name: 'Sign' })).not.toBeInTheDocument();
+        expect(screen.queryByRole('link', { name: 'Sign' })).not.toBeInTheDocument();
+      });
+    });
+  });
+});

package/js/components/SignContractButton/index.tsx

@@ -0,0 +1,97 @@
+import { Button } from '@openfun/cunningham-react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { useState } from 'react';
+import { LearnerContractFrame } from 'components/ContractFrame';
+import { Contract, ContractState, CredentialOrder, NestedCredentialOrder } from 'types/Joanie';
+import { RouterButton } from 'widgets/Dashboard/components/RouterButton';
+import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
+import { LearnerDashboardPaths } from 'widgets/Dashboard/utils/learnerRouteMessages';
+import DownloadContractButton from 'components/DownloadContractButton';
+import { Maybe } from 'types/utils';
+import { ContractHelper } from 'utils/ContractHelper';
+
+const messages = defineMessages({
+  contractSignActionLabel: {
+    id: 'components.SignContractButton.contractSignActionLabel',
+    description: 'Label of "sign contract" action.',
+    defaultMessage: 'Sign',
+  },
+  contractDownloadActionLabel: {
+    id: 'components.SignContractButton.contractDownloadActionLabel',
+    description: 'Label of "download contract" action.',
+    defaultMessage: 'Download',
+  },
+  contractDownloadError: {
+    id: 'components.SignContractButton.contractDownloadError',
+    description: "Message displayed when the order's contract download fails.",
+    defaultMessage:
+      'An error happened while downloading the training contract. Please try again later.',
+  },
+});
+
+interface SignContractButtonProps {
+  order: CredentialOrder | NestedCredentialOrder;
+  contract: Maybe<Contract>;
+  writable: boolean;
+  className?: string;
+}
+
+interface SignContractButtonLinkProps {
+  orderId: string;
+  className?: string;
+}
+
+const SignContractButtonLink = ({ orderId, className }: SignContractButtonLinkProps) => {
+  const getRoutePath = getDashboardRoutePath(useIntl());
+  return (
+    <RouterButton
+      size="small"
+      href={getRoutePath(LearnerDashboardPaths.ORDER, {
+        orderId,
+      })}
+      className={className}
+    >
+      <FormattedMessage {...messages.contractSignActionLabel} />
+    </RouterButton>
+  );
+};
+
+const SignContractButton = ({ order, contract, writable, className }: SignContractButtonProps) => {
+  const [contractFrameOpened, setContractFrameOpened] = useState(false);
+  const [contractLoading, setContractLoading] = useState(false);
+  const contractState = ContractHelper.getState(contract);
+
+  if (!writable && contractState === ContractState.UNSIGNED) {
+    return <SignContractButtonLink orderId={order.id} className={className} />;
+  }
+
+  return (
+    <>
+      {contractState === ContractState.SIGNED && (
+        <DownloadContractButton contract={contract!} className="dashboard-item__button" />
+      )}
+      {contractState === ContractState.UNSIGNED && (
+        <Button
+          size="small"
+          className={className}
+          onClick={() => setContractFrameOpened(true)}
+          disabled={contractLoading || contractFrameOpened}
+        >
+          <FormattedMessage {...messages.contractSignActionLabel} />
+        </Button>
+      )}
+
+      <LearnerContractFrame
+        order={order}
+        isOpen={contractFrameOpened}
+        onDone={() => {
+          // Set the contract in loading mode waiting for order re-fetch that will remove it.
+          setContractLoading(true);
+        }}
+        onClose={() => setContractFrameOpened(false)}
+      />
+    </>
+  );
+};
+
+export default SignContractButton;

package/js/components/SuccessIcon/_styles.scss

@@ -0,0 +1,66 @@
+.success-icon {
+  $duration: 1.1s;
+  align-items: center;
+  animation: wave $duration * 0.95 backwards;
+  border-radius: 100vw;
+  color: r-theme-val(steps-content, icon-success-color);
+  display: inline-flex;
+  fill: none;
+  height: 4.5rem;
+  justify-content: center;
+  margin-bottom: 1.25rem;
+  max-height: 100%;
+  stroke: currentColor;
+  width: 4.5rem;
+
+  @keyframes wave {
+    0% {
+      transform: scale(1);
+    }
+    33% {
+      transform: scale(1.2);
+    }
+    66% {
+      transform: scale(0.8);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+
+  & > * {
+    fill: none;
+    stroke-linecap: round;
+    stroke-width: 2;
+    stroke: r-theme-val(steps-content, icon-success-background);
+    &.back {
+      stroke: lighten(r-theme-val(steps-content, icon-success-background), 20%);
+    }
+  }
+
+  .line {
+    $length: 25.52px;
+    @include keyframe-strokedLineAppear(checkAppear, $length);
+    animation: checkAppear $duration * 0.5 $duration * 0.4 backwards $r-ease-out;
+    stroke-dasharray: $length;
+
+    &:nth-of-type(1) {
+      animation-delay: $duration * 0.3;
+      animation-duration: $duration * 0.5;
+    }
+  }
+
+  .circle {
+    $PI: 3.14159265;
+    $radius: 16px;
+    @include keyframe-strokedLineAppear(circleAppear, 2 * $PI * $radius, true);
+    animation: circleAppear $duration $r-ease-out;
+    stroke-dasharray: 2 * $PI * $radius;
+    transform-origin: center center;
+    transform: rotateZ(-45deg);
+
+    &:nth-of-type(1) {
+      animation-duration: $duration * 0.9;
+    }
+  }
+}

package/js/components/SuccessIcon/index.tsx

@@ -0,0 +1,10 @@
+export const SuccessIcon = () => {
+  return (
+    <svg className="success-icon" role="img" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <circle className="circle back" cx="16" cy="16" r="14" />
+      <circle className="circle" cx="16" cy="16" r="14" />
+      <polyline className="line back" points="7.5 15.5 14 22.5 24 10.5" />
+      <polyline className="line" points="7.5 15.5 14 22.5 24 10.5" />
+    </svg>
+  );
+};

package/js/components/TeacherDashboardCourseList/_styles.scss

@@ -11,7 +11,6 @@
 
   &__title {
     font-size: rem-calc(22px);
-    color: r-theme-val(dashboard-course-list, title-color);
     white-space: nowrap;
     margin-bottom: rem-calc(10px);
   }

package/js/components/TeacherDashboardCourseList/index.spec.tsx

@@ -58,7 +58,7 @@ describe('components/TeacherDashboardCourseList', () => {
       title: "One lesson about: Let's dance, the online lesson",
     }).one();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
       mockPaginatedResponse([courseCooking, courseDancing], 15, false),
     );
     const productCooking: CourseListItem = CourseListItemFactory({
@@ -68,7 +68,7 @@ describe('components/TeacherDashboardCourseList', () => {
       title: "Full training: Let's dance, the online lesson",
     }).one();
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
       mockPaginatedResponse([productCooking, productDancing], 15, false),
     );
 
@@ -95,14 +95,14 @@ describe('components/TeacherDashboardCourseList', () => {
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/courses/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
     );
     expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
     );
 
     expect(
-      screen.getByRole('heading', { name: /One lesson about: How to cook birds/ }),
+      await screen.findByRole('heading', { name: /One lesson about: How to cook birds/ }),
     ).toBeInTheDocument();
     expect(
       screen.getByRole('heading', { name: /One lesson about: Let's dance, the online lesson/ }),
@@ -117,14 +117,14 @@ describe('components/TeacherDashboardCourseList', () => {
 
   it('should render empty list', async () => {
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/courses/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
       mockPaginatedResponse([], 0, false),
       {
         overwriteRoutes: true,
       },
     );
     fetchMock.get(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
       mockPaginatedResponse([], 0, false),
       {
         overwriteRoutes: true,
@@ -151,10 +151,10 @@ describe('components/TeacherDashboardCourseList', () => {
     const calledUrls = fetchMock.calls().map((call) => call[0]);
     expect(calledUrls).toHaveLength(nbApiCalls);
     expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/courses/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/courses/?has_listed_course_runs=true&page=1&page_size=${perPage}`,
     );
     expect(calledUrls).toContain(
-      `https://joanie.endpoint/api/v1.0/course-product-relations/?page=1&page_size=${perPage}`,
+      `https://joanie.endpoint/api/v1.0/course-product-relations/?product_type=credential&page=1&page_size=${perPage}`,
     );
 
     expect(await screen.findByText('You have no courses yet.')).toBeInTheDocument();

package/js/components/TeacherDashboardCourseList/index.tsx

@@ -1,14 +1,12 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
-import { Link } from 'react-router-dom';
 import { useRef } from 'react';
+import { Button } from '@openfun/cunningham-react';
 import { CourseGlimpseList, getCourseGlimpseListProps } from 'components/CourseGlimpseList';
 import { Spinner } from 'components/Spinner';
-import { getDashboardRoutePath } from 'widgets/Dashboard/utils/dashboardRoutes';
-import { TeacherDashboardPaths } from 'widgets/Dashboard/utils/teacherRouteMessages';
 import context from 'utils/context';
 import { useCourseProductUnion } from 'hooks/useCourseProductUnion';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
-import { Button } from 'components/Button';
+import { ProductType } from 'types/Joanie';
 
 const messages = defineMessages({
   loading: {
@@ -39,13 +37,12 @@ const TeacherDashboardCourseList = ({
 }: TeacherDashboardCourseListProps) => {
   const loadMoreButtonRef = useRef<HTMLButtonElement & HTMLAnchorElement>(null);
   const intl = useIntl();
-  const routerLocal = intl.locale.split('-')[0];
   const {
     data: courseAndProductList,
     isLoading,
     next,
     hasMore,
-  } = useCourseProductUnion({ perPage: 25, organizationId });
+  } = useCourseProductUnion({ perPage: 25, organizationId, productType: ProductType.CREDENTIAL });
   useIntersectionObserver({
     target: loadMoreButtonRef,
     onIntersect: next,
@@ -55,10 +52,18 @@ const TeacherDashboardCourseList = ({
   return (
     <div className="dashboard-course-list">
       {titleTranslated && (
-        <Link to={getDashboardRoutePath(intl)(TeacherDashboardPaths.TEACHER_COURSES)}>
-          <h2 className="dashboard-course-list__title">{titleTranslated}</h2>
-        </Link>
+        <h2 className="dashboard-course-list__title dashboard__page_title">{titleTranslated}</h2>
       )}
+      {courseAndProductList.length > 0 ? (
+        <CourseGlimpseList
+          courses={getCourseGlimpseListProps(courseAndProductList, intl, organizationId)}
+          context={context}
+          className="dashboard__course-glimpse-list"
+        />
+      ) : (
+        <FormattedMessage {...messages.emptyList} />
+      )}
+
       {isLoading && (
         <Spinner aria-labelledby="loading-courses-data">
           <span id="loading-courses-data">
@@ -66,28 +71,17 @@ const TeacherDashboardCourseList = ({
           </span>
         </Spinner>
       )}
-      {!isLoading &&
-        (courseAndProductList.length > 0 ? (
-          <>
-            <CourseGlimpseList
-              courses={getCourseGlimpseListProps(courseAndProductList, routerLocal, organizationId)}
-              context={context}
-              className="dashboard__course-glimpse-list"
-            />
-            {hasMore && (
-              <Button
-                onClick={() => next()}
-                disabled={isLoading}
-                ref={loadMoreButtonRef}
-                color="transparent-darkest"
-              >
-                <FormattedMessage {...messages.loadMore} />
-              </Button>
-            )}
-          </>
-        ) : (
-          <FormattedMessage {...messages.emptyList} />
-        ))}
+
+      {hasMore && (
+        <Button
+          onClick={() => next()}
+          disabled={isLoading}
+          ref={loadMoreButtonRef}
+          color="tertiary"
+        >
+          <FormattedMessage {...messages.loadMore} />
+        </Button>
+      )}
     </div>
   );
 };

package/js/contexts/JoanieApiContext/index.spec.tsx

@@ -27,7 +27,7 @@ describe('useJoanieApi', () => {
 
     expect(result.current).toBeInstanceOf(Object);
     expect(result.current.user).toBeInstanceOf(Object);
-    expect(result.current.products).toBeInstanceOf(Object);
+    expect(result.current.courses.products).toBeInstanceOf(Object);
   });
 
   it('throws an error if it is not used within a JoanieApiProvider', () => {

package/js/contexts/SessionContext/BaseSessionProvider.tsx

@@ -25,14 +25,12 @@ const BaseSessionProvider = ({ children }: PropsWithChildren<any>) => {
    * - `null` when the user is anonymous or the request failed;
    * - a user object when the user is logged in.
    */
-  const { data: user, isLoading: isLoadingUser } = useQuery<Nullable<User>>(
-    ['user'],
-    AuthenticationApi!.me,
-    {
-      refetchOnWindowFocus: true,
-      staleTime: REACT_QUERY_SETTINGS.staleTimes.session,
-    },
-  );
+  const { data: user, isPending } = useQuery<Nullable<User>>({
+    queryKey: ['user'],
+    queryFn: AuthenticationApi!.me,
+    refetchOnWindowFocus: true,
+    staleTime: REACT_QUERY_SETTINGS.staleTimes.session,
+  });
   const previousUserState = usePrevious(user);
 
   const queryClient = useQueryClient();
@@ -49,33 +47,25 @@ const BaseSessionProvider = ({ children }: PropsWithChildren<any>) => {
     AuthenticationApi!.register();
   }, [queryClient]);
 
-  const invalidate = useCallback(() => {
-    /*
-      Invalidate all queries except 'user' as we can set it to null manually
-      after logout to avoid extra requests
-    */
+  const destroy = useCallback(async () => {
+    await AuthenticationApi!.logout();
+    sessionStorage.removeItem(REACT_QUERY_SETTINGS.cacheStorage.key);
     queryClient.removeQueries({
       predicate: (query: any) =>
         query.options.queryKey.includes('user') && query.options.queryKey.length > 1,
     });
     queryClient.setQueryData(['user'], null);
-  }, [queryClient]);
-
-  const destroy = useCallback(async () => {
-    AuthenticationApi!.logout();
-    invalidate();
-  }, [invalidate]);
+  }, []);
 
   const context = useMemo(
     () => ({
       user,
-      isLoadingUser,
+      isPending,
       destroy,
-      invalidate,
       login,
       register,
     }),
-    [user, isLoadingUser, destroy, login, register],
+    [user, isPending, destroy, login, register],
   );
 
   useEffect(() => {

package/js/contexts/SessionContext/JoanieSessionProvider.spec.tsx

@@ -10,6 +10,7 @@ import {
 import { Deferred } from 'utils/test/deferred';
 import { REACT_QUERY_SETTINGS, RICHIE_USER_TOKEN } from 'settings';
 import { createTestQueryClient } from 'utils/test/createTestQueryClient';
+import { HttpStatusCode } from 'utils/errors/HttpError';
 import JoanieSessionProvider from './JoanieSessionProvider';
 import { useSession } from '.';
 
@@ -69,6 +70,19 @@ describe('JoanieSessionProvider', () => {
     );
   });
 
+  it('removes user access token within session storage on error', async () => {
+    sessionStorage.setItem(RICHIE_USER_TOKEN, 'richie');
+    fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', HttpStatusCode.FORBIDDEN);
+
+    await act(async () => {
+      render(<Wrapper />);
+    });
+    await waitFor(async () => {
+      expect(fetchMock.lastUrl()).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
+    });
+    await waitFor(async () => expect(sessionStorage.getItem(RICHIE_USER_TOKEN)).toBeNull());
+  });
+
   it('prefetches addresses, credit-cards and order when user is authenticated', async () => {
     const user = FonzieUserFactory().one();
     const deferredUser = new Deferred();