💄(frontend) hide Crisp when mobile and modal

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/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>
+  );
 };

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}
+    </>
+  );
+};