Files
automatisch/packages/web/src/components/LiveChat/index.ee.tsx
2023-03-07 20:36:54 +00:00

63 lines
1.5 KiB
TypeScript

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<string, unknown>;
}
}
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 (<React.Fragment />);
return (
<Chatwoot ready={isReady} />
);
};
export default LiveChat;