Fix front plugin not initialize with user email, first name and last name (#1506)

Fix front plugin not working

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<User, 'email' | 'displayName' | 'supportUserHash'>,
+    ) => {
+      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);
+      configureFront(supportChat.supportFrontChatId, currentUser);
-      setIsFrontChatLoaded(true);
-    }
-    if (currentUser?.email && isFrontChatLoaded) {
-      window.FrontChat?.('identity', {
-        email: currentUser.email,
-        name: currentUser.displayName,
-        userHash: currentUser?.supportUserHash,
-      });
     }
   }, [
-    currentUser?.displayName,
+    configureFront,
-    currentUser?.email,
+    currentUser,
-    currentUser?.supportUserHash,
     isFrontChatLoaded,
     supportChat?.supportDriver,
     supportChat.supportFrontChatId,
   ]);
 
-  function handleSupportClick() {
-    if (supportChat?.supportDriver === 'front') {
-      window.FrontChat?.('show');
-    }
-  }
-
   return isFrontChatLoaded ? (
     <StyledButtonContainer>
       <Button
@@ -91,7 +86,7 @@ export default function SupportChat() {
         size={'small'}
         title="Support"
         icon={<IconHelpCircle size={theme.icon.size.md} />}
-        onClick={handleSupportClick}
+        onClick={() => window.FrontChat?.('show')}
       />
     </StyledButtonContainer>
   ) : null;