diff --git a/front/src/modules/ui/navbar/components/SupportChat.tsx b/front/src/modules/ui/navbar/components/SupportChat.tsx index b7cbe8437..4e7053b59 100644 --- a/front/src/modules/ui/navbar/components/SupportChat.tsx +++ b/front/src/modules/ui/navbar/components/SupportChat.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState } from 'react'; +import { useCallback, useEffect, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; @@ -7,6 +7,7 @@ import { currentUserState } from '@/auth/states/currentUserState'; import { supportChatState } from '@/client-config/states/supportChatState'; import { Button } from '@/ui/button/components/Button'; import { IconHelpCircle } from '@/ui/icon'; +import { User } from '~/generated/graphql'; const StyledButtonContainer = styled.div` display: flex; @@ -28,62 +29,56 @@ function insertScript({ 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 currentUser = useRecoilValue(currentUserState); const supportChat = useRecoilValue(supportChatState); const [isFrontChatLoaded, setIsFrontChatLoaded] = useState(false); + const configureFront = useCallback( + ( + chatId: string, + currentUser: Pick, + ) => { + const url = 'https://chat-assets.frontapp.com/v1/chat.bundle.js'; + const script = document.querySelector(`script[src="${url}"]`); + + if (!script) { + insertScript({ + src: url, + onLoad: () => { + window.FrontChat?.('init', { + chatId, + useDefaultLauncher: false, + email: currentUser.email, + name: currentUser.displayName, + userHash: currentUser?.supportUserHash, + }); + setIsFrontChatLoaded(true); + }, + }); + } + }, + [], + ); + useEffect(() => { if ( supportChat?.supportDriver === 'front' && supportChat.supportFrontChatId && + currentUser?.email && !isFrontChatLoaded ) { - configureFront(supportChat.supportFrontChatId); - setIsFrontChatLoaded(true); - } - if (currentUser?.email && isFrontChatLoaded) { - window.FrontChat?.('identity', { - email: currentUser.email, - name: currentUser.displayName, - userHash: currentUser?.supportUserHash, - }); + configureFront(supportChat.supportFrontChatId, currentUser); } }, [ - currentUser?.displayName, - currentUser?.email, - currentUser?.supportUserHash, + configureFront, + currentUser, isFrontChatLoaded, supportChat?.supportDriver, supportChat.supportFrontChatId, ]); - function handleSupportClick() { - if (supportChat?.supportDriver === 'front') { - window.FrontChat?.('show'); - } - } - return isFrontChatLoaded ? (