✨(frontend) add crisp chatbot

Integrate Crisp chatbot for immediate user support access. This enables real-time interaction, enhancing user experience by providing quick assistance.
numerique-gouv · Sep 20, 2024 · 9232643 · 9232643
1 parent ac86a4e
commit 9232643
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 1 deletion.
diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env
@@ -1,4 +1,5 @@
 NEXT_PUBLIC_API_ORIGIN=
 NEXT_PUBLIC_Y_PROVIDER_URL=
 NEXT_PUBLIC_MEDIA_URL=
-NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_CRISP_WEBSITE_ID=
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
@@ -22,6 +22,7 @@
     "@hocuspocus/provider": "2.13.5",
     "@openfun/cunningham-react": "2.9.4",
     "@tanstack/react-query": "5.56.2",
+    "crisp-sdk-web": "1.0.25",
     "i18next": "23.15.1",
     "idb": "8.0.0",
     "lodash": "4.17.21",

diff --git a/src/frontend/apps/impress/src/core/auth/useAuthStore.tsx b/src/frontend/apps/impress/src/core/auth/useAuthStore.tsx
@@ -1,6 +1,10 @@
 import { create } from 'zustand';
 
 import { baseApiUrl } from '@/core/conf';
+import {
+  initializeSupportSession,
+  terminateSupportSession,
+} from '@/hook/useSupport';
 
 import { User, getMe } from './api';
 import { PATH_AUTH_LOCAL_STORAGE } from './conf';
@@ -36,6 +40,7 @@ export const useAuthStore = create<AuthStore>((set) => ({
           return;
         }
 
+        initializeSupportSession(data);
         set({ authenticated: true, userData: data });
       })
       .catch(() => {})
@@ -53,6 +58,7 @@ export const useAuthStore = create<AuthStore>((set) => ({
     window.location.replace(`${baseApiUrl()}authenticate/`);
   },
   logout: () => {
+    terminateSupportSession();
     window.location.replace(`${baseApiUrl()}logout/`);
   },
 }));
diff --git a/src/frontend/apps/impress/src/custom-next.d.ts b/src/frontend/apps/impress/src/custom-next.d.ts
@@ -24,5 +24,6 @@ namespace NodeJS {
     NEXT_PUBLIC_Y_PROVIDER_URL?: string;
     NEXT_PUBLIC_SW_DEACTIVATED?: string;
     NEXT_PUBLIC_THEME?: string;
+    NEXT_PUBLIC_CRISP_WEBSITE_ID?: string;
   }
 }
diff --git a/src/frontend/apps/impress/src/hook/useSupport.tsx b/src/frontend/apps/impress/src/hook/useSupport.tsx
@@ -0,0 +1,43 @@
+import { Crisp } from 'crisp-sdk-web';
+import { useEffect } from 'react';
+
+import { User } from '@/core';
+
+const isCrispConfigured = (): boolean => {
+  return typeof window !== 'undefined' && !!window.$crisp;
+};
+
+export const initializeSupportSession = (user: User) => {
+  if (!isCrispConfigured()) {
+    return;
+  }
+  Crisp.setTokenId(user.id);
+  Crisp.user.setEmail(user.email);
+};
+
+export const terminateSupportSession = () => {
+  if (!isCrispConfigured()) {
+    return;
+  }
+  Crisp.session.reset();
+};
+
+/**
+ * Configure Crisp chat for real-time support across all pages.
+ */
+export const useSupport = () => {
+  useEffect(() => {
+    const CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
+
+    if (!CRISP_WEBSITE_ID) {
+      console.warn('Crisp Website ID is not set');
+      return;
+    }
+    if (isCrispConfigured()) {
+      return;
+    }
+    Crisp.configure(CRISP_WEBSITE_ID);
+  }, []);
+
+  return null;
+};
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { AppProvider } from '@/core/';
 import { useSWRegister } from '@/features/service-worker/';
+import { useSupport } from '@/hook/useSupport';
 import { NextPageWithLayout } from '@/types/next';
 
 import './globals.css';
@@ -17,6 +18,9 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const getLayout = Component.getLayout ?? ((page) => page);
   const { t } = useTranslation();
 
+  // Initialize Crisp, the support chat used among all La Suite products
+  useSupport();
+
   return (
     <>
       <Head>

diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock
@@ -5105,6 +5105,11 @@ crelt@^1.0.0:
   resolved "https://registry.yarnpkg.com/crelt/-/crelt-1.0.6.tgz#7cc898ea74e190fb6ef9dae57f8f81cf7302df72"
   integrity sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==
 
+crisp-sdk-web@1.0.25:
+  version "1.0.25"
+  resolved "https://registry.yarnpkg.com/crisp-sdk-web/-/crisp-sdk-web-1.0.25.tgz#5566227dfcc018435b228db2f998d66581e5fdef"
+  integrity sha512-CWTHFFeHRV0oqiXoPh/aIAKhFs6xcIM4NenGPnClAMCZUDQgQsF1OWmZWmnVNjJriXUmWRgDfeUxcxygS0dCRA==
+
 cross-env@*, cross-env@7.0.3:
   version "7.0.3"
   resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"