richie-education 2.12.0 → 2.13.0

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

@@ -11,7 +11,7 @@ import createQueryClient from 'utils/react-query/createQueryClient';
 import { REACT_QUERY_SETTINGS } from 'settings';
 import { handle } from 'utils/errors/handle';
 import context from 'utils/context';
-import { SessionProvider } from 'data/useSession';
+import { SessionProvider } from 'data/SessionProvider';
 import CourseRunEnrollment from '.';
 
 jest.mock('utils/errors/handle');
@@ -147,17 +147,19 @@ describe('<CourseRunEnrollment />', () => {
 
     const button = screen.getByRole('button', { name: 'Enroll now' });
 
-    const enrollmentAction = new Deferred();
-    fetchMock.post(`${endpoint}/api/enrollment/v1/enrollment`, enrollmentAction.promise);
-    fireEvent.click(button);
+    // const enrollmentAction = new Deferred();
+    fetchMock.post(`${endpoint}/api/enrollment/v1/enrollment`, 500);
 
     await act(async () => {
-      enrollmentAction.reject('500 - Internal Server Error');
+      expect(() => fireEvent.click(button)).not.toThrow();
+      // enrollmentAction.reject('500 - Internal Server Error');
     });
 
     screen.getByRole('button', { name: 'Enroll now' });
     screen.getByText('Your enrollment request failed.');
-    expect(mockHandle).toHaveBeenCalledWith('500 - Internal Server Error');
+    expect(mockHandle).toHaveBeenCalledWith(
+      new Error('[SET - Enrollment] > 500 - Internal Server Error'),
+    );
   });
 
   it('shows a link to the course if the user is already enrolled', async () => {

package/js/components/CourseRunEnrollment/index.tsx

@@ -2,13 +2,13 @@ import React, { useCallback, useEffect, useReducer } from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { Spinner } from 'components/Spinner';
-import { useSession } from 'data/useSession';
+import { useSession } from 'data/SessionProvider';
 import { Priority } from 'types';
 import { User } from 'types/User';
 import { Maybe, Nullable } from 'types/utils';
 import { handle } from 'utils/errors/handle';
 import { CommonDataProps } from 'types/commonDataProps';
-import useEnrollment from 'data/useEnrollment';
+import useCourseEnrollment from 'data/useCourseEnrollment';
 
 const messages = defineMessages({
   enroll: {
@@ -143,7 +143,7 @@ const reducer = ({ step, context }: ReducerState, action: ReducerAction): Reduce
 
 const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps & CommonDataProps> = (props) => {
   const { user, login } = useSession();
-  const { enrollmentIsActive, setEnrollment } = useEnrollment(props.courseRun.resource_link);
+  const { enrollmentIsActive, setEnrollment } = useCourseEnrollment(props.courseRun.resource_link);
 
   const [
     {
@@ -161,10 +161,11 @@ const CourseRunEnrollment: React.FC<CourseRunEnrollmentProps & CommonDataProps>
   const enroll = useCallback(async () => {
     dispatch({ type: ActionType.ENROLL });
     if (courseRun && currentUser) {
-      const response = await setEnrollment();
+      const isEnrolled = await setEnrollment().catch(() => undefined);
+
       dispatch({
         type: ActionType.UPDATE_CONTEXT,
-        payload: { isEnrolled: response },
+        payload: { isEnrolled },
       });
     }
   }, [courseRun, currentUser, dispatch]);

package/js/components/PaginateCourseSearch/index.tsx

@@ -1,5 +1,5 @@
-import { Fragment, useState } from 'react';
-import { defineMessages, FormattedMessage } from 'react-intl';
+import { Fragment } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { CourseSearchParamsAction, useCourseSearchParams } from 'data/useCourseSearchParams';
 
@@ -49,11 +49,8 @@ interface PaginateCourseSearchProps {
 }
 
 export const PaginateCourseSearch = ({ courseSearchTotalCount }: PaginateCourseSearchProps) => {
-  // Generate a unique ID per instance to ensure our aria-labelledby do not break if there are two
-  // or more instances of <PaginateCourseSearch /> on the page
-  const [componentId] = useState(Math.random());
   const { courseSearchParams, dispatchCourseSearchParamsUpdate } = useCourseSearchParams();
-
+  const intl = useIntl();
   // Extract pagination information from params and search results meta
   const limit = Number(courseSearchParams.limit);
   const offset = Number(courseSearchParams.offset);
@@ -90,10 +87,7 @@ export const PaginateCourseSearch = ({ courseSearchTotalCount }: PaginateCourseS
 
   return (
     <div className="pagination">
-      <div id={`pagination-label-${componentId}`} className="offscreen">
-        <FormattedMessage {...messages.pagination} />
-      </div>
-      <nav aria-labelledby={`pagination-label-${componentId}`}>
+      <nav aria-label={intl.formatMessage(messages.pagination)}>
         <ul className="pagination__list">
           {pageList.map((page, index) => (
             <Fragment key={page}>

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

@@ -1,9 +1,16 @@
-import { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from 'react';
 import { IntlProvider } from 'react-intl';
-
 import { findByText, render } from '@testing-library/react';
-import { ContextFactory } from 'utils/test/factories';
+import { ContextFactory as mockContextFactory } from 'utils/test/factories';
+import { handle as mockHandle } from 'utils/errors/handle';
+import { noop } from 'utils';
+import { Root } from '.';
 
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockContextFactory({ authentication: undefined }).generate(),
+}));
+jest.mock('utils/errors/handle');
 jest.mock('components/UserLogin', () => ({
   __esModule: true,
   default: () => 'user login component rendered',
@@ -15,19 +22,15 @@ jest.mock('components/RootSearchSuggestField', () => ({
     `root search suggest field component rendered with ${exampleProp}`,
 }));
 
-jest.mock('data/useSession', () => ({
+jest.mock('data/SessionProvider', () => ({
   __esModule: true,
   SessionProvider: (props: PropsWithChildren<any>) => props.children,
 }));
 
 describe('<Root />', () => {
-  window.__richie_frontend_context__ = {
-    context: ContextFactory({ authentication: undefined }).generate(),
-  };
-  const { Root } = require('.');
-
   beforeEach(() => {
-    jest.spyOn(console, 'warn').mockImplementation(() => {});
+    jest.spyOn(console, 'error').mockImplementation(noop);
+    jest.spyOn(console, 'warn').mockImplementation(noop);
   });
 
   afterEach(() => {
@@ -88,4 +91,28 @@ describe('<Root />', () => {
       'Failed to load React component: no such component in Library UserFeedback',
     );
   });
+
+  it('renders properly components even if one of them raises an error', async () => {
+    // Create a <UserLogin /> component which renders properly
+    const userLoginContainer = document.createElement('div');
+    userLoginContainer.setAttribute('class', 'richie-react richie-react--user-login');
+    document.body.append(userLoginContainer);
+    // On the other hand, <Search /> component raises an error
+    jest.doMock('components/Search', () => {
+      throw Error('Failed to render Search component.');
+    });
+    const searchFailingComponent = document.createElement('div');
+    searchFailingComponent.setAttribute('class', 'richie-react richie-react--search');
+    document.body.append(searchFailingComponent);
+
+    // Render the root component, passing our real element and our bogus one
+    render(
+      <IntlProvider locale="en">
+        <Root richieReactSpots={[userLoginContainer, searchFailingComponent]} />
+      </IntlProvider>,
+    );
+
+    await findByText(userLoginContainer, 'user login component rendered');
+    expect(mockHandle).toHaveBeenCalledWith(new Error('Failed to render Search component.'));
+  });
 });

package/js/components/Root/index.tsx

@@ -4,8 +4,10 @@ import startCase from 'lodash-es/startCase';
 import { lazy, Suspense } from 'react';
 import ReactDOM from 'react-dom';
 import { HistoryProvider } from 'data/useHistory';
-import { SessionProvider } from 'data/useSession';
+import { SessionProvider } from 'data/SessionProvider';
 import { Spinner } from 'components/Spinner';
+import ErrorBoundary from 'utils/errors/ErrorBoundary';
+import context from 'utils/context';
 
 const CourseRunEnrollment = lazy(() => import('components/CourseRunEnrollment'));
 const LanguageSelector = lazy(() => import('components/LanguageSelector'));
@@ -78,10 +80,15 @@ export const Root = ({ richieReactSpots }: RootProps) => {
 
       // Add context to props if they do not already include it
       if (!props.context) {
-        props.context = window.__richie_frontend_context__.context;
+        props.context = context;
       }
 
-      return ReactDOM.createPortal(<Component {...props} />, element);
+      return ReactDOM.createPortal(
+        <ErrorBoundary>
+          <Component {...props} />
+        </ErrorBoundary>,
+        element,
+      );
     } else {
       // Emit a warning at runtime when we fail to find a matching component for an element that required one
       console.warn('Failed to load React component: no such component in Library ' + componentName);

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

@@ -14,7 +14,7 @@ import { Deferred } from 'utils/test/deferred';
 import createQueryClient from 'utils/react-query/createQueryClient';
 import context from 'utils/context';
 import { REACT_QUERY_SETTINGS } from 'settings';
-import { SessionProvider } from 'data/useSession';
+import { SessionProvider } from 'data/SessionProvider';
 import UserLogin from '.';
 
 jest.mock('utils/errors/handle', () => ({

package/js/components/UserLogin/index.tsx

@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 're
 
 import { Spinner } from 'components/Spinner';
 import { UserMenu } from 'components/UserMenu';
-import { useSession } from 'data/useSession';
+import { useSession } from 'data/SessionProvider';
 import { CommonDataProps } from 'types/commonDataProps';
 
 const messages: { [key: string]: MessageDescriptor } = defineMessages({

package/js/data/CourseCodeProvider/index.spec.tsx

@@ -0,0 +1,24 @@
+import type { CourseCodeProviderProps } from 'data/CourseCodeProvider/index';
+import { CourseCodeProvider, useCourseCode } from 'data/CourseCodeProvider/index';
+import type { PropsWithChildren } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+
+describe('useCourseCode', () => {
+  it('returns the course code stored within CourseCodeProvider', () => {
+    const { result } = renderHook(useCourseCode, {
+      wrapper: ({ code, children }: PropsWithChildren<CourseCodeProviderProps>) => (
+        <CourseCodeProvider code={code}>{children}</CourseCodeProvider>
+      ),
+      initialProps: { code: '00013' },
+    });
+
+    expect(result.current).toBe('00013');
+  });
+
+  it('throws an error if it is not used within a CourseCodeProvider', () => {
+    const { result } = renderHook(useCourseCode);
+    expect(result.error).toEqual(
+      new Error('useCourse must be used within a component wrapped by a <CourseProvider />.'),
+    );
+  });
+});

package/js/data/CourseCodeProvider/index.tsx

@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+import type { Maybe } from 'types/utils';
+
+const Context = createContext<Maybe<string>>(undefined);
+
+export interface CourseCodeProviderProps {
+  code: string;
+}
+
+/**
+ * A React Provider which aims to wrap components related to a specific course. In this
+ * way we are able to pass down course's code to children.
+ */
+export const CourseCodeProvider = ({
+  code,
+  children,
+}: PropsWithChildren<CourseCodeProviderProps>) => (
+  <Context.Provider value={code}>{children}</Context.Provider>
+);
+
+/**
+ * A hook to use within `CourseCodeProvider`. It returns the course code context.
+ */
+export const useCourseCode = () => {
+  const context = useContext(Context);
+  if (context === undefined) {
+    throw new Error('useCourse must be used within a component wrapped by a <CourseProvider />.');
+  }
+  return context;
+};

package/js/data/JoanieApiProvider/index.spec.tsx

@@ -0,0 +1,34 @@
+import type { PropsWithChildren } from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { ContextFactory as mockContextFactory } from 'utils/test/factories';
+import JoanieApiProvider, { useJoanieApi } from 'data/JoanieApiProvider/index';
+
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockContextFactory({
+    joanie_backend: {
+      endpoint: 'https://joanie.test',
+    },
+  }).generate(),
+}));
+
+describe('useJoanieApi', () => {
+  it('returns the joanie api interface', () => {
+    const { result } = renderHook(useJoanieApi, {
+      wrapper: ({ children }: PropsWithChildren<{}>) => (
+        <JoanieApiProvider>{children}</JoanieApiProvider>
+      ),
+    });
+
+    expect(result.current).toBeInstanceOf(Object);
+    expect(result.current.user).toBeInstanceOf(Object);
+    expect(result.current.courses).toBeInstanceOf(Object);
+  });
+
+  it('throws an error if it is not used within a JoanieApiProvider', () => {
+    const { result } = renderHook(useJoanieApi);
+    expect(result.error).toEqual(
+      new Error('useJoanieApi must be used within a JoanieApiProvider.'),
+    );
+  });
+});

package/js/data/JoanieApiProvider/index.tsx

@@ -0,0 +1,31 @@
+import type { PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+import type * as Joanie from 'types/Joanie';
+import API from 'utils/api/joanie';
+import type { Maybe } from 'types/utils';
+
+const JoanieApiContext = createContext<Maybe<Joanie.API>>(undefined);
+
+/**
+ * Provider to access to the Joanie API interface.
+ */
+const JoanieApiProvider = ({ children }: PropsWithChildren<{}>) => {
+  const api = API();
+
+  return <JoanieApiContext.Provider value={api}>{children}</JoanieApiContext.Provider>;
+};
+
+/**
+ * Hook to use within `JoanieApiProvider`. It returns the joanie api interface.
+ */
+export const useJoanieApi = () => {
+  const context = useContext(JoanieApiContext);
+
+  if (context === undefined) {
+    throw new Error('useJoanieApi must be used within a JoanieApiProvider.');
+  }
+
+  return context;
+};
+
+export default JoanieApiProvider;

package/js/data/SessionProvider/BaseSessionProvider.tsx

@@ -0,0 +1,87 @@
+import { PropsWithChildren, useCallback, useEffect, useMemo } from 'react';
+import { AuthenticationApi } from 'utils/api/authentication';
+import { useQuery, useQueryClient } from 'react-query';
+import { Nullable } from 'types/utils';
+import { User } from 'types/User';
+import { REACT_QUERY_SETTINGS } from 'settings';
+import usePrevious from 'utils/usePrevious';
+import { Session } from './SessionContext';
+
+/**
+ * BaseSessionProvider
+ *
+ * @param children - Elements to render inside SessionProvider
+ *
+ * @return {Object} Session
+ * @return {Object} Session.user - authenticated user information
+ * @return {Function} Session.login - redirect to the login page
+ * @return {Function} Session.register - redirect to the register page
+ * @return {Function} Session.destroy - set Session to undefined then make a request to logout user to the authentication service
+ */
+const BaseSessionProvider = ({ children }: PropsWithChildren<any>) => {
+  /**
+   * `user` is:
+   * - `undefined` when we have not made the `whoami` request yet;
+   * - `null` when the user is anonymous or the request failed;
+   * - a user object when the user is logged in.
+   */
+  const { data: user } = useQuery<Nullable<User>>('user', AuthenticationApi!.me, {
+    refetchOnWindowFocus: true,
+    staleTime: REACT_QUERY_SETTINGS.staleTimes.session,
+  });
+  const previousUserState = usePrevious(user);
+
+  const queryClient = useQueryClient();
+
+  const login = useCallback(() => {
+    queryClient.clear();
+    AuthenticationApi!.login();
+  }, [queryClient]);
+
+  const register = useCallback(() => {
+    queryClient.clear();
+    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
+    */
+    queryClient.removeQueries({
+      predicate: (query: any) =>
+        query.options.queryKey.includes('user') && query.options.queryKey !== 'user',
+    });
+    queryClient.setQueryData('user', null);
+  }, [queryClient]);
+
+  const destroy = useCallback(async () => {
+    await AuthenticationApi!.logout();
+    invalidate();
+  }, [invalidate]);
+
+  const context = useMemo(
+    () => ({
+      user,
+      destroy,
+      invalidate,
+      login,
+      register,
+    }),
+    [user, destroy, login, register],
+  );
+
+  useEffect(() => {
+    // When user is updated, session queries should be invalidated.
+    if (previousUserState !== user) {
+      queryClient.removeQueries({
+        predicate: (query: any) =>
+          query.options.queryKey.includes('user') && query.options.queryKey !== 'user',
+      });
+    }
+  }, [user]);
+
+  return <Session.Provider value={context}>{children}</Session.Provider>;
+};
+
+export default BaseSessionProvider;

package/js/data/SessionProvider/JoanieSessionProvider.spec.tsx

@@ -0,0 +1,101 @@
+import fetchMock from 'fetch-mock';
+import { IntlProvider } from 'react-intl';
+import { QueryClientProvider } from 'react-query';
+import { act, render, waitFor } from '@testing-library/react';
+import { ContextFactory as mockContextFactory, FonzieUserFactory } from 'utils/test/factories';
+import createQueryClient from 'utils/react-query/createQueryClient';
+import { Deferred } from 'utils/test/deferred';
+import { RICHIE_USER_TOKEN } from 'settings';
+import JoanieSessionProvider from './JoanieSessionProvider';
+
+jest.mock('utils/errors/handle');
+jest.mock('utils/context', () => ({
+  __esModule: true,
+  default: mockContextFactory({
+    authentication: { backend: 'fonzie', endpoint: 'https://auth.endpoint.test' },
+    joanie_backend: { endpoint: 'https://joanie.endpoint.test' },
+  }).generate(),
+}));
+
+// - Joanie Session Provider test suite
+describe('JoanieSessionProvider', () => {
+  beforeEach(() => {
+    fetchMock.restore();
+  });
+
+  it('stores user access token within session storage', async () => {
+    const queryClient = createQueryClient();
+    const user = FonzieUserFactory.generate();
+
+    fetchMock
+      .get('https://auth.endpoint.test/api/v1.0/user/me', user)
+      .get('https://joanie.endpoint.test/api/addresses/', [])
+      .get('https://joanie.endpoint.test/api/credit-cards/', [])
+      .get('https://joanie.endpoint.test/api/orders/', []);
+
+    render(
+      <IntlProvider locale="en">
+        <QueryClientProvider client={queryClient}>
+          <JoanieSessionProvider />
+        </QueryClientProvider>
+      </IntlProvider>,
+    );
+
+    await waitFor(() => {
+      expect(fetchMock.lastUrl()).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
+    });
+
+    expect(sessionStorage.getItem(RICHIE_USER_TOKEN)).toEqual(user.access_token);
+  });
+
+  it('prefetches addresses, credit-cards and order when user is authenticated', async () => {
+    const queryClient = createQueryClient();
+    const user = FonzieUserFactory.generate();
+    const deferredUser = new Deferred();
+
+    fetchMock
+      .get('https://auth.endpoint.test/api/v1.0/user/me', deferredUser.promise)
+      .get('https://joanie.endpoint.test/api/addresses/', [])
+      .get('https://joanie.endpoint.test/api/credit-cards/', [])
+      .get('https://joanie.endpoint.test/api/orders/', []);
+
+    render(
+      <IntlProvider locale="en">
+        <QueryClientProvider client={queryClient}>
+          <JoanieSessionProvider />
+        </QueryClientProvider>
+      </IntlProvider>,
+    );
+
+    await act(async () => deferredUser.resolve(user));
+
+    const calls = fetchMock.calls();
+    expect(calls).toHaveLength(4);
+    expect(calls[0][0]).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
+    expect(calls[1][0]).toEqual('https://joanie.endpoint.test/api/addresses/');
+    expect(calls[2][0]).toEqual('https://joanie.endpoint.test/api/credit-cards/');
+    expect(calls[3][0]).toEqual('https://joanie.endpoint.test/api/orders/');
+  });
+
+  it('does not prefetch address, credit-cards, and order when user is anonymous', async () => {
+    const queryClient = createQueryClient();
+    const deferredUser = new Deferred();
+
+    fetchMock.get('https://auth.endpoint.test/api/v1.0/user/me', deferredUser.promise);
+
+    render(
+      <IntlProvider locale="en">
+        <QueryClientProvider client={queryClient}>
+          <JoanieSessionProvider />
+        </QueryClientProvider>
+      </IntlProvider>,
+    );
+
+    await act(async () => deferredUser.resolve(null));
+
+    expect(fetchMock.lastUrl()).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
+
+    expect(fetchMock.calls()).toHaveLength(1);
+    expect(fetchMock.lastUrl()).toEqual('https://auth.endpoint.test/api/v1.0/user/me');
+  });
+});

package/js/data/SessionProvider/JoanieSessionProvider.tsx

@@ -0,0 +1,133 @@
+import type React from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery, useQueryClient } from 'react-query';
+import { AuthenticationApi } from 'utils/api/authentication';
+import isTestEnv from 'utils/test/isTestEnv';
+import type { User } from 'types/User';
+import type { Nullable } from 'types/utils';
+import { useCreditCards } from 'hooks/useCreditCards';
+import { useAddresses } from 'hooks/useAddresses';
+import { useOrders } from 'hooks/useOrders';
+import { REACT_QUERY_SETTINGS, RICHIE_USER_TOKEN } from 'settings';
+import JoanieApiProvider from 'data/JoanieApiProvider';
+import usePrevious from 'utils/usePrevious';
+import { Session } from './SessionContext';
+
+/**
+ * JoanieSessionProvider
+ *
+ * It retrieves the user then prefetches its orders, addresses and credit-cards.
+ *
+ * @param children - Elements to render inside SessionProvider
+ *
+ * @return {Object} Session
+ * @return {Object} Session.user - authenticated user information
+ * @return {Function} Session.login - redirect to the login page
+ * @return {Function} Session.register - redirect to the register page
+ * @return {Function} Session.destroy - set Session to undefined then make a request to logout user to the authentication service
+ */
+const JoanieSessionProvider = ({ children }: React.PropsWithChildren<any>) => {
+  /**
+   * `user` is:
+   * - `undefined` when we have not made the `whoami` request yet;
+   * - `null` when the user is anonymous or the request failed;
+   * - a user object when the user is logged in.
+   */
+  const [refetchInterval, setRefetchInterval] = useState<false | number>(false);
+  const { data: user, isStale } = useQuery<Nullable<User>>('user', AuthenticationApi!.me, {
+    refetchOnWindowFocus: true,
+    refetchInterval,
+    staleTime: REACT_QUERY_SETTINGS.staleTimes.session,
+    onError: () => {
+      sessionStorage.removeItem(RICHIE_USER_TOKEN);
+    },
+    onSuccess: (data) => {
+      sessionStorage.removeItem(RICHIE_USER_TOKEN);
+      if (data) {
+        sessionStorage.setItem(RICHIE_USER_TOKEN, data.access_token!);
+      }
+    },
+  });
+  const previousUserState = usePrevious(user);
+
+  const queryClient = useQueryClient();
+  const addresses = useAddresses();
+  const creditCards = useCreditCards();
+  const orders = useOrders();
+
+  const login = useCallback(() => {
+    sessionStorage.removeItem(REACT_QUERY_SETTINGS.cacheStorage.key);
+    sessionStorage.removeItem(RICHIE_USER_TOKEN);
+    AuthenticationApi!.login();
+  }, [queryClient]);
+
+  const register = useCallback(() => {
+    sessionStorage.removeItem(REACT_QUERY_SETTINGS.cacheStorage.key);
+    sessionStorage.removeItem(RICHIE_USER_TOKEN);
+    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
+    */
+    sessionStorage.removeItem(RICHIE_USER_TOKEN);
+    queryClient.removeQueries({
+      predicate: (query: any) =>
+        query.options.queryKey.includes('user') && query.options.queryKey !== 'user',
+    });
+    queryClient.setQueryData('user', null);
+  }, [queryClient]);
+
+  const destroy = useCallback(async () => {
+    await AuthenticationApi!.logout();
+    invalidate();
+  }, [invalidate]);
+
+  useEffect(() => {
+    if (user && !isStale) {
+      addresses.methods.prefetch();
+      creditCards.methods.prefetch();
+      orders.methods.prefetch();
+    }
+
+    if (!isTestEnv) {
+      // We do not want to enable refetchInterval during tests as it can pollute
+      // the fetchMock when we use fake timers.
+      if (user) {
+        setRefetchInterval(REACT_QUERY_SETTINGS.staleTimes.session);
+      } else {
+        setRefetchInterval(false);
+      }
+    }
+  }, [user]);
+
+  const context = useMemo(
+    () => ({
+      user,
+      destroy,
+      login,
+      register,
+    }),
+    [user, destroy, login, register],
+  );
+
+  useEffect(() => {
+    // When user is updated, session queries should be invalidated.
+    if (previousUserState !== user) {
+      queryClient.removeQueries({
+        predicate: (query: any) =>
+          query.options.queryKey.includes('user') && query.options.queryKey !== 'user',
+      });
+    }
+  }, [user]);
+
+  return <Session.Provider value={context}>{children}</Session.Provider>;
+};
+
+export default ({ children, ...props }: React.PropsWithChildren<any>) => (
+  <JoanieApiProvider>
+    <JoanieSessionProvider {...props}>{children}</JoanieSessionProvider>
+  </JoanieApiProvider>
+);