103 lines
2.6 KiB
TypeScript
103 lines
2.6 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { useRecoilValue } from 'recoil';
|
|
|
|
import { currentUserState } from '@/auth/states/currentUserState';
|
|
import { supportChatState } from '@/client-config/states/supportChatState';
|
|
import {
|
|
Button,
|
|
ButtonSize,
|
|
ButtonVariant,
|
|
} from '@/ui/button/components/Button';
|
|
import { IconHelpCircle } from '@/ui/icon';
|
|
|
|
const StyledButtonContainer = styled.div`
|
|
display: flex;
|
|
`;
|
|
|
|
function insertScript({
|
|
src,
|
|
innerHTML,
|
|
onLoad,
|
|
}: {
|
|
src?: string;
|
|
innerHTML?: string;
|
|
onLoad?: (...args: any[]) => void;
|
|
}) {
|
|
const script = document.createElement('script');
|
|
if (src) script.src = src;
|
|
if (innerHTML) script.innerHTML = innerHTML;
|
|
if (onLoad) script.onload = onLoad;
|
|
document.body.appendChild(script);
|
|
}
|
|
|
|
function configureFront(chatId: string) {
|
|
const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js';
|
|
// check if Front Chat script is already loaded
|
|
const script = document.querySelector(`script[src="${url}"]`);
|
|
|
|
if (!script) {
|
|
// insert script and initialize Front Chat when it loads
|
|
insertScript({
|
|
src: url,
|
|
onLoad: () => {
|
|
window.FrontChat?.('init', {
|
|
chatId,
|
|
useDefaultLauncher: false,
|
|
});
|
|
},
|
|
});
|
|
}
|
|
}
|
|
|
|
export default function SupportChat() {
|
|
const theme = useTheme();
|
|
const user = useRecoilValue(currentUserState);
|
|
const supportChatConfig = useRecoilValue(supportChatState);
|
|
const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (
|
|
supportChatConfig?.supportDriver === 'front' &&
|
|
supportChatConfig.supportFrontChatId &&
|
|
!isFrontChatLoaded
|
|
) {
|
|
configureFront(supportChatConfig.supportFrontChatId);
|
|
setIsFrontChatLoaded(true);
|
|
}
|
|
if (user?.email && isFrontChatLoaded) {
|
|
window.FrontChat?.('identity', {
|
|
email: user.email,
|
|
name: user.displayName,
|
|
userHash: user?.supportUserHash,
|
|
});
|
|
}
|
|
}, [
|
|
isFrontChatLoaded,
|
|
supportChatConfig?.supportDriver,
|
|
supportChatConfig.supportFrontChatId,
|
|
user?.displayName,
|
|
user?.email,
|
|
user?.supportUserHash,
|
|
]);
|
|
|
|
function handleSupportClick() {
|
|
if (supportChatConfig?.supportDriver === 'front') {
|
|
window.FrontChat?.('show');
|
|
}
|
|
}
|
|
|
|
return isFrontChatLoaded ? (
|
|
<StyledButtonContainer>
|
|
<Button
|
|
variant={ButtonVariant.Tertiary}
|
|
size={ButtonSize.Small}
|
|
title="Support"
|
|
icon={<IconHelpCircle size={theme.icon.size.md} />}
|
|
onClick={handleSupportClick}
|
|
/>
|
|
</StyledButtonContainer>
|
|
) : null;
|
|
}
|