From f6911f378436b64a09c585a1e97762fb7581b993 Mon Sep 17 00:00:00 2001
From: Arnaud Robin <arnaud.robin@beta.gouv.fr>
Date: Fri, 20 Sep 2024 17:00:08 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20crisp=20chatbot?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add crisp chatbot to allow users for interaction.
Create a new crisp chatbot component for this and populate with user info.
---
 src/frontend/apps/impress/.env                |  3 ++-
 src/frontend/apps/impress/package.json        |  1 +
 .../apps/impress/src/components/CrispChat.tsx | 26 +++++++++++++++++++
 .../apps/impress/src/crisp-sdk-web.d.ts       |  8 ++++++
 src/frontend/apps/impress/src/pages/_app.tsx  | 10 ++++++-
 src/frontend/apps/impress/tsconfig.json       |  1 +
 6 files changed, 47 insertions(+), 2 deletions(-)
 create mode 100644 src/frontend/apps/impress/src/components/CrispChat.tsx
 create mode 100644 src/frontend/apps/impress/src/crisp-sdk-web.d.ts

diff --git a/src/frontend/apps/impress/.env b/src/frontend/apps/impress/.env
index 41724eaab..4e310bb6d 100644
--- 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
\ No newline at end of file
+NEXT_PUBLIC_THEME=dsfr
+NEXT_PUBLIC_CRISP_WEBSITE_ID=
\ No newline at end of file
diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json
index 064eef88a..f419530fa 100644
--- 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": "*",
     "i18next": "23.15.1",
     "idb": "8.0.0",
     "lodash": "4.17.21",
diff --git a/src/frontend/apps/impress/src/components/CrispChat.tsx b/src/frontend/apps/impress/src/components/CrispChat.tsx
new file mode 100644
index 000000000..98a010ccb
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/CrispChat.tsx
@@ -0,0 +1,26 @@
+import { Crisp } from 'crisp-sdk-web';
+import { useEffect } from 'react';
+
+import { useAuthStore } from '@/core/auth';
+
+const CrispChat = () => {
+  const { userData } = useAuthStore();
+
+  useEffect(() => {
+    const CRISP_WEBSITE_ID = process.env.NEXT_PUBLIC_CRISP_WEBSITE_ID;
+    if (CRISP_WEBSITE_ID) {
+      Crisp.configure(CRISP_WEBSITE_ID);
+
+      // Identify user if available
+      if (userData) {
+        Crisp.user.setEmail(userData.email);
+      }
+    } else {
+      console.warn('Crisp Website ID is not set');
+    }
+  }, [userData]);
+
+  return null;
+};
+
+export default CrispChat;
diff --git a/src/frontend/apps/impress/src/crisp-sdk-web.d.ts b/src/frontend/apps/impress/src/crisp-sdk-web.d.ts
new file mode 100644
index 000000000..98473495e
--- /dev/null
+++ b/src/frontend/apps/impress/src/crisp-sdk-web.d.ts
@@ -0,0 +1,8 @@
+declare module 'crisp-sdk-web' {
+  export const Crisp: {
+    configure: (websiteId: string) => void;
+    user: {
+      setEmail: (email: string) => void;
+    };
+  };
+}
diff --git a/src/frontend/apps/impress/src/pages/_app.tsx b/src/frontend/apps/impress/src/pages/_app.tsx
index 48b8a2d09..26de6a66f 100644
--- a/src/frontend/apps/impress/src/pages/_app.tsx
+++ b/src/frontend/apps/impress/src/pages/_app.tsx
@@ -1,4 +1,5 @@
 import type { AppProps } from 'next/app';
+import dynamic from 'next/dynamic';
 import Head from 'next/head';
 import { useTranslation } from 'react-i18next';
 
@@ -12,6 +13,10 @@ type AppPropsWithLayout = AppProps & {
   Component: NextPageWithLayout;
 };
 
+const CrispChat = dynamic(() => import('../components/CrispChat'), {
+  ssr: false,
+});
+
 export default function App({ Component, pageProps }: AppPropsWithLayout) {
   useSWRegister();
   const getLayout = Component.getLayout ?? ((page) => page);
@@ -29,7 +34,10 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
         />
         <link rel="icon" href="/favicon.ico" sizes="any" />
       </Head>
-      <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
+      <AppProvider>
+        {getLayout(<Component {...pageProps} />)}
+        <CrispChat />
+      </AppProvider>
     </>
   );
 }
diff --git a/src/frontend/apps/impress/tsconfig.json b/src/frontend/apps/impress/tsconfig.json
index ebff7dcfe..7be5bd420 100644
--- a/src/frontend/apps/impress/tsconfig.json
+++ b/src/frontend/apps/impress/tsconfig.json
@@ -24,6 +24,7 @@
   },
   "include": [
     "src/custom-next.d.ts",
+    "src/crisp-sdk-web.d.ts",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",