From 8927635c5f76b05480b85ddf992eca3712224ba4 Mon Sep 17 00:00:00 2001
From: Anthony LC <anthony.le-courric@mail.numerique.gouv.fr>
Date: Tue, 4 Mar 2025 11:44:13 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20hide=20Crisp=20when=20?=
 =?UTF-8?q?mobile=20and=20modal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Crisp button was hidding buttons on mobile
when a modal was open. This commit hides the
Crisp button when a modal is open on mobile.
---
 .../src/core/config/ConfigProvider.tsx        | 18 ++++----
 .../apps/impress/src/services/Crisp.tsx       | 41 +++++++++++++++++++
 2 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
index 8d021b14..39a6938e 100644
--- a/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
+++ b/src/frontend/apps/impress/src/core/config/ConfigProvider.tsx
@@ -3,7 +3,7 @@ import { PropsWithChildren, useEffect } from 'react';
 
 import { Box } from '@/components';
 import { useCunninghamTheme } from '@/cunningham';
-import { PostHogProvider, configureCrispSession } from '@/services';
+import { CrispProvider, PostHogProvider } from '@/services';
 import { useSentryStore } from '@/stores/useSentryStore';
 
 import { useConfig } from './api/useConfig';
@@ -29,14 +29,6 @@ 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">
@@ -45,5 +37,11 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => {
     );
   }
 
-  return <PostHogProvider conf={conf.POSTHOG_KEY}>{children}</PostHogProvider>;
+  return (
+    <PostHogProvider conf={conf.POSTHOG_KEY}>
+      <CrispProvider websiteId={conf?.CRISP_WEBSITE_ID}>
+        {children}
+      </CrispProvider>
+    </PostHogProvider>
+  );
 };
diff --git a/src/frontend/apps/impress/src/services/Crisp.tsx b/src/frontend/apps/impress/src/services/Crisp.tsx
index 673cabc8..83a7816b 100644
--- a/src/frontend/apps/impress/src/services/Crisp.tsx
+++ b/src/frontend/apps/impress/src/services/Crisp.tsx
@@ -3,9 +3,23 @@
  */
 
 import { Crisp } from 'crisp-sdk-web';
+import { PropsWithChildren, useEffect, useState } from 'react';
+import { createGlobalStyle } from 'styled-components';
 
 import { User } from '@/features/auth';
 
+const CrispStyle = createGlobalStyle`
+  #crisp-chatbox a{
+    zoom: 0.8;
+  }
+
+  @media screen and (width <= 1024px) {
+    .c__modals--opened #crisp-chatbox {
+      display: none!important;
+    }
+  }
+`;
+
 export const initializeCrispSession = (user: User) => {
   if (!Crisp.isCrispInjected()) {
     return;
@@ -29,3 +43,30 @@ export const terminateCrispSession = () => {
   Crisp.setTokenId();
   Crisp.session.reset();
 };
+
+interface CrispProviderProps {
+  websiteId?: string;
+}
+
+export const CrispProvider = ({
+  children,
+  websiteId,
+}: PropsWithChildren<CrispProviderProps>) => {
+  const [isConfigured, setIsConfigured] = useState(false);
+
+  useEffect(() => {
+    if (!websiteId) {
+      return;
+    }
+
+    setIsConfigured(true);
+    configureCrispSession(websiteId);
+  }, [websiteId]);
+
+  return (
+    <>
+      {isConfigured && <CrispStyle />}
+      {children}
+    </>
+  );
+};