diff --git a/packages/web/src/components/LiveChat/Chatwoot.ee.tsx b/packages/web/src/components/LiveChat/Chatwoot.ee.tsx new file mode 100644 index 00000000..a45f7f3e --- /dev/null +++ b/packages/web/src/components/LiveChat/Chatwoot.ee.tsx @@ -0,0 +1,41 @@ +import * as React from 'react'; + +import appConfig from 'config/app'; +import useCurrentUser from 'hooks/useCurrentUser'; + +type ChatwootProps = { + ready: boolean; +} + +const Chatwoot = ({ ready }: ChatwootProps) => { + const currentUser = useCurrentUser(); + + React.useEffect(function initiateChatwoot() { + window.chatwootSDK.run({ + websiteToken: 'EFyq5MTsvS7XwUrwSH36VskT', + baseUrl: appConfig.chatwootBaseUrl, + }); + + return function removeChatwoot() { + window.$chatwoot.reset(); + window.$chatwoot.toggleBubbleVisibility('hide'); + }; + }, []); + + React.useEffect(function initiateUser() { + if (!currentUser?.id || !ready) return; + + window.$chatwoot.setUser(currentUser.id, { + email: currentUser.email, + name: currentUser.fullName, + }); + + window.$chatwoot.toggleBubbleVisibility("show"); + }, [currentUser, ready]); + + return ( + + ); +}; + +export default Chatwoot; diff --git a/packages/web/src/components/LiveChat/index.ee.tsx b/packages/web/src/components/LiveChat/index.ee.tsx new file mode 100644 index 00000000..6af0df30 --- /dev/null +++ b/packages/web/src/components/LiveChat/index.ee.tsx @@ -0,0 +1,62 @@ +import * as React from 'react'; + +import appConfig from 'config/app'; +import useAuthentication from 'hooks/useAuthentication'; +import useCloud from 'hooks/useCloud'; +import Chatwoot from './Chatwoot.ee'; + +declare global { + interface Window { + chatwootSDK: any; + $chatwoot: any; + chatwootSettings: Record; + } +} + +const LiveChat = () => { + const isCloud = useCloud(); + const { isAuthenticated } = useAuthentication(); + const [isLoaded, setLoaded] = React.useState(false); + const [isReady, setReady] = React.useState(false); + + const shouldShow = isCloud && isAuthenticated; + + React.useLayoutEffect(() => { + window.addEventListener("chatwoot:ready", function () { + setReady(true); + }, { once: true }); + }, []); + + React.useLayoutEffect(function addChatwootScript() { + if (!shouldShow) return; + + window.chatwootSettings = { + hideMessageBubble: true, + position: 'right', + type: 'standard', + launcherTitle: 'Give us feedback' + }; + + const g = document.createElement('script') + const s = document.getElementsByTagName('script')[0]; + g.src = appConfig.chatwootBaseUrl + '/packs/js/sdk.js'; + g.defer = true; + g.async = true; + + if (s.parentNode) { + s.parentNode.insertBefore(g, s); + } + + g.onload = function () { + setLoaded(true); + } + }, [shouldShow]); + + if (!shouldShow || !isLoaded) return (); + + return ( + + ); +}; + +export default LiveChat; diff --git a/packages/web/src/config/app.ts b/packages/web/src/config/app.ts index aefd1a8f..184dbe2b 100644 --- a/packages/web/src/config/app.ts +++ b/packages/web/src/config/app.ts @@ -6,6 +6,7 @@ const config: Config = { baseUrl: process.env.REACT_APP_BASE_URL as string, graphqlUrl: process.env.REACT_APP_GRAPHQL_URL as string, notificationsUrl: process.env.REACT_APP_NOTIFICATIONS_URL as string, + chatwootBaseUrl: 'https://app.chatwoot.com', }; export default config; diff --git a/packages/web/src/index.tsx b/packages/web/src/index.tsx index 946c4beb..502bd72e 100644 --- a/packages/web/src/index.tsx +++ b/packages/web/src/index.tsx @@ -7,6 +7,7 @@ import SnackbarProvider from 'components/SnackbarProvider'; import { AuthenticationProvider } from 'contexts/Authentication'; import { AutomatischInfoProvider } from 'contexts/AutomatischInfo'; import Router from 'components/Router'; +import LiveChat from 'components/LiveChat/index.ee'; import routes from 'routes'; import reportWebVitals from './reportWebVitals'; @@ -18,6 +19,8 @@ ReactDOM.render( {routes} + +