customChatWidget: fix widget close/open icon state using ChatEvents (#145)

#144

Author: Spencer Lepine

customChatWidget/public/amazon-connect-chat-interface.js

@@ -3,7 +3,7 @@ SPDX-License-Identifier: MIT-0 */
 
 import React, { useState, useContext, useEffect } from 'react';
 import { useAppConfig } from '../../providers/AppConfigProvider';
-import { device, closeChatSVGPath, loggerNames} from '../../constants';
+import { device, chatWithFormStates, closeChatSVGPath, loggerNames } from '../../constants';
 import { Button, Svg } from './styled';
 import { genLogger } from "../../lib/logger";
 
@@ -14,14 +14,31 @@ const { log } = genLogger(name);
 const ChatButton = (props) => {
   log(">>> Init");
   log(props);
-  const { chatWithoutForm, forceUnmountChatWidget, setForceUnmountChatWidget, setWidgetIsOpen, widgetIsOpen } = props;
+  const { chatWithoutForm, forceUnmountChatWidget, setForceUnmountChatWidget, setWidgetIsOpen, widgetIsOpen, currentState } = props;
   const { primaryColor } = useAppConfig();
   const handleChatIconClickEvent = (e) => {
     if (chatWithoutForm && forceUnmountChatWidget) setForceUnmountChatWidget(false)
 
     setWidgetIsOpen(prev => !prev);
   }
 
+    //This useEffect will run only after currentState is changed to widget.
+    useEffect(() => {
+      if (currentState === chatWithFormStates.CHAT_WIDGET) {
+        window.connect.ChatEvents &&
+          window.connect.ChatEvents.onAgentEndChat(() => {
+            log("Chat Ended hence toggling back to initial icon(chat)");
+            handleChatIconClickEvent();
+          });
+
+        window.connect.ChatEvents &&
+          window.connect.ChatEvents.onChatEnded(() => {
+            log("Chat Disconnected hence toggling back to initial icon(chat)");
+            handleChatIconClickEvent();
+          });
+      }
+    }, [currentState]);
+
   return (
         <Button primaryColor={ primaryColor } onClick={ handleChatIconClickEvent } device={ device } widgetIsOpen={ widgetIsOpen }>
         {

customChatWidget/src/components/ChatButton/index.js

@@ -4,7 +4,7 @@ SPDX-License-Identifier: MIT-0 */
 import React, { useState, useContext, useEffect } from "react";
 import anime from 'animejs';
 import { useAppConfig } from '../../providers/AppConfigProvider';
-import { device, closeChatSVGPath, chatSVGPath, loggerNames } from '../../constants';
+import { device, closeChatSVGPath, chatSVGPath, loggerNames, chatWithFormStates } from '../../constants';
 import { Button, Svg } from './styled';
 import { genLogger } from "../../lib/logger";
 
@@ -17,7 +17,7 @@ const ChatIcon = (props) =>
     log('ChatIcon.displayName: ', ChatIcon.displayName);
     log(props);
     const { primaryColor } = useAppConfig();
-    const { chatWithoutForm, forceUnmountChatWidget, setForceUnmountChatWidget, setWidgetIsOpen, widgetIsOpen } = props;
+    const { chatWithoutForm, forceUnmountChatWidget, setForceUnmountChatWidget, setWidgetIsOpen, widgetIsOpen, currentState } = props;
     const handleChatIconClickEvent = (e) => {
       if (chatWithoutForm && forceUnmountChatWidget) setForceUnmountChatWidget(false)
       const timeline = anime.timeline({
@@ -35,6 +35,7 @@ const ChatIcon = (props) =>
         });
       setWidgetIsOpen(!widgetIsOpen);
     }
+
     // Toggle to initial Icon after the chat is ended by the chat Widget:
     const toggleToChatIcon = () => {
       const timeline = anime.timeline({
@@ -53,6 +54,22 @@ const ChatIcon = (props) =>
       })
     }
 
+    //This useEffect will run only after currentState is changed to widget.
+    useEffect(() => {
+      if (currentState === chatWithFormStates.CHAT_WIDGET) {
+        window.connect.ChatEvents &&
+          window.connect.ChatEvents.onAgentEndChat(() => {
+            log("Chat Ended hence toggling back to initial icon(chat)");
+            handleChatIconClickEvent();
+          });
+
+        window.connect.ChatEvents &&
+          window.connect.ChatEvents.onChatEnded(() => {
+            log("Chat Disconnected hence toggling back to initial icon(chat)");
+            handleChatIconClickEvent();
+          });
+      }
+    }, [currentState]);
 
   /*! Both chat and carrot SVG's are from Material Design Icons https://github.com/google/material-design-icons
   SPDX-License-Identifier: Apache-2.0 */

customChatWidget/src/components/ChatIcon/index.js

@@ -21,17 +21,20 @@ const ChatWithForm = () => {
     const [currentState, setCurrentState] = useState(chatWithFormStates.FORM);
     const [data, setData] = useState({});
     const { initiationIcon } = useAppConfig();
+
     return (
         <Main device={device}>
             {
                 initiationIcon.toLowerCase() === chatInitiationIcon.BUTTON ?
                     <ChatButton
                         widgetIsOpen={widgetIsOpen}
                         setWidgetIsOpen={setWidgetIsOpen}
+                        currentState={currentState}
                     />
                     : <ChatIcon
                         widgetIsOpen={widgetIsOpen}
                         setWidgetIsOpen={setWidgetIsOpen}
+                        currentState={currentState}
                     />
             }
             <div style={{ display: widgetIsOpen ? null : "none" }}>

customChatWidget/src/views/ChatWithForm/index.js

@@ -27,13 +27,15 @@ const ChatWithoutForm = () => {
                     <ChatButton
                         widgetIsOpen={widgetIsOpen}
                         setWidgetIsOpen={setWidgetIsOpen}
+                        currentState={currentState}
                         forceUnmountChatWidget={forceUnmountChatWidget}
                         chatWithoutForm={true}
                         setForceUnmountChatWidget={setForceUnmountChatWidget}
                     />
                     : <ChatIcon
                         widgetIsOpen={widgetIsOpen}
                         setWidgetIsOpen={setWidgetIsOpen}
+                        currentState={currentState}
                         forceUnmountChatWidget={forceUnmountChatWidget}
                         chatWithoutForm={true}
                         setForceUnmountChatWidget={setForceUnmountChatWidget}