✨(frontend) add crisp chatbot

Integrate Crisp chatbot for immediate user support access.

This enables real-time interaction, enhancing user experience
by providing quick assistance.

src/frontend/apps/impress/package.json

@@ -23,6 +23,7 @@
     "@openfun/cunningham-react": "2.9.4",
     "@sentry/nextjs": "8.40.0",
     "@tanstack/react-query": "5.61.3",
+    "crisp-sdk-web": "1.0.25",
     "i18next": "24.0.0",
     "i18next-browser-languagedetector": "8.0.0",
     "idb": "8.0.0",

src/frontend/apps/impress/src/core/auth/__tests__/useAuthStore.test.tsx

@@ -0,0 +1,40 @@
+import { Crisp } from 'crisp-sdk-web';
+import fetchMock from 'fetch-mock';
+
+import { useAuthStore } from '../useAuthStore';
+
+jest.mock('crisp-sdk-web', () => ({
+  ...jest.requireActual('crisp-sdk-web'),
+  Crisp: {
+    isCrispInjected: jest.fn().mockReturnValue(true),
+    setTokenId: jest.fn(),
+    user: {
+      setEmail: jest.fn(),
+    },
+    session: {
+      reset: jest.fn(),
+    },
+  },
+}));
+
+describe('useAuthStore', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    fetchMock.restore();
+  });
+
+  it('checks support session is terminated when logout', () => {
+    window.$crisp = true;
+    Object.defineProperty(window, 'location', {
+      value: {
+        ...window.location,
+        replace: jest.fn(),
+      },
+      writable: true,
+    });
+
+    useAuthStore.getState().logout();
+
+    expect(Crisp.session.reset).toHaveBeenCalled();
+  });
+});

src/frontend/apps/impress/src/core/auth/useAuthStore.tsx

@@ -1,6 +1,7 @@
 import { create } from 'zustand';
 
 import { baseApiUrl } from '@/api';
+import { terminateCrispSession } from '@/services';
 
 import { User, getMe } from './api';
 import { PATH_AUTH_LOCAL_STORAGE } from './conf';
@@ -42,6 +43,7 @@ export const useAuthStore = create<AuthStore>((set, get) => ({
     window.location.replace(`${baseApiUrl()}authenticate/`);
   },
   logout: () => {
+    terminateCrispSession();
     window.location.replace(`${baseApiUrl()}logout/`);
   },
   // If we try to access a specific page and we are not authenticated

src/frontend/apps/impress/src/core/config/ConfigProvider.tsx

@@ -3,6 +3,7 @@ import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
+import { configureCrispSession } from '@/services';
 import { useSentryStore } from '@/stores/useSentryStore';
 
 import { useConfig } from './api/useConfig';
@@ -28,6 +29,14 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
     setTheme(conf.FRONTEND_THEME);
   }, [conf?.FRONTEND_THEME, setTheme]);
 
+  useEffect(() => {
+    if (!conf?.CRISP_WEBSITE_ID) {
+      return;
+    }
+
+    configureCrispSession(conf.CRISP_WEBSITE_ID);
+  }, [conf?.CRISP_WEBSITE_ID]);
+
   if (!conf) {
     return (
       <Box $height="100vh" $width="100vw" $align="center" $justify="center">

src/frontend/apps/impress/src/core/config/api/useConfig.tsx

@@ -4,13 +4,14 @@ import { APIError, errorCauses, fetchAPI } from '@/api';
 import { Theme } from '@/cunningham/';
 
 interface ConfigResponse {
-  SENTRY_DSN: string;
-  COLLABORATION_SERVER_URL: string;
-  ENVIRONMENT: string;
-  FRONTEND_THEME: Theme;
   LANGUAGES: [string, string][];
   LANGUAGE_CODE: string;
-  MEDIA_BASE_URL: string;
+  ENVIRONMENT: string;
+  COLLABORATION_SERVER_URL?: string;
+  CRISP_WEBSITE_ID?: string;
+  FRONTEND_THEME?: Theme;
+  MEDIA_BASE_URL?: string;
+  SENTRY_DSN?: string;
 }
 
 export const getConfig = async (): Promise<ConfigResponse> => {

src/frontend/apps/impress/src/services/Crisp.tsx

@@ -0,0 +1,30 @@
+/**
+ * Configure Crisp chat for real-time support across all pages.
+ */
+
+import { Crisp } from 'crisp-sdk-web';
+
+import { User } from '@/core';
+
+export const initializeCrispSession = (user: User) => {
+  if (!Crisp.isCrispInjected()) {
+    return;
+  }
+  Crisp.setTokenId(`impress-${user.id}`);
+  Crisp.user.setEmail(user.email);
+};
+
+export const configureCrispSession = (websiteId: string) => {
+  if (Crisp.isCrispInjected()) {
+    return;
+  }
+  Crisp.configure(websiteId);
+};
+
+export const terminateCrispSession = () => {
+  if (!Crisp.isCrispInjected()) {
+    return;
+  }
+  Crisp.setTokenId();
+  Crisp.session.reset();
+};

src/frontend/apps/impress/src/services/index.ts

@@ -0,0 +1 @@
+export * from './Crisp';