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 ( @@ -45,5 +37,11 @@ export const ConfigProvider = ({ children }: PropsWithChildren) => { ); } - return {children}; + return ( + + + {children} + + + ); }; 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) => { + const [isConfigured, setIsConfigured] = useState(false); + + useEffect(() => { + if (!websiteId) { + return; + } + + setIsConfigured(true); + configureCrispSession(websiteId); + }, [websiteId]); + + return ( + <> + {isConfigured && } + {children} + + ); +};