Merge branch 'master' into dependabot/npm_and_yarn/mobileChatExamples…

…/connectReactNativeChat/tar-6.2.1
amazon-connect · Aug 19, 2024 · 5c938ce · 5c938ce
2 parents 39be662 + f32ef0d
commit 5c938ce
Show file tree

Hide file tree

Showing 73 changed files with 25,341 additions and 16,584 deletions.
diff --git a/README.md b/README.md
@@ -18,7 +18,7 @@ At the moment, these are the solutions in this repo:
 4. **[customChatWidget](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/customChatWidget)**
    Custom Chat Widget for Amazon Connect, with a Chat Form that can be easily plugged into a webpage. This solution helps customers to have Amazon Connect Custom Chat Widget in their website, by applying simple configuration parameters. It also makes customizing the `amazon-connect-interface.js` file easier, and can be used as an easy way to host custom widget on a webpage.
 
-5. **[connectReactNativeChat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/connectReactNativeChat)**
+5. **[connectReactNativeChat](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/mobileChatExamples/connectReactNativeChat)**
    React Native demo Chat application for Amazon Connect. This cross-platform solution implements basic Chat JS functionality and is fully customizable. Follow the provided documentation to build with [`amazon-connect-chatjs@^1.5.0`](https://github.com/amazon-connect/amazon-connect-chatjs).
 
 6. **[startChatContactAPILocalProxy](https://github.com/amazon-connect/amazon-connect-chat-ui-examples/tree/master/startChatContactAPILocalProxy)**

diff --git a/customChatWidget/public/ACChat.js b/customChatWidget/public/ACChat.js
diff --git a/customChatWidget/src/components/ChatIcon/index.js b/customChatWidget/src/components/ChatIcon/index.js
@@ -18,7 +18,12 @@ const ChatIcon = (props) =>
     log(props);
     const { primaryColor } = useAppConfig();
     const { chatWithoutForm, forceUnmountChatWidget, setForceUnmountChatWidget, setWidgetIsOpen, widgetIsOpen, currentState } = props;
-    const handleChatIconClickEvent = (e) => {
+
+    const handleChatIconClickEvent = () => {
+      toggleChatIcon(!widgetIsOpen);
+    }
+
+    const toggleChatIcon = (open) => {
       if (chatWithoutForm && forceUnmountChatWidget) setForceUnmountChatWidget(false)
       const timeline = anime.timeline({
           duration: 750,
@@ -28,12 +33,12 @@ const ChatIcon = (props) =>
           targets: ".chat",
           d: [
               {
-              value: widgetIsOpen ? chatSVGPath : closeChatSVGPath
+              value: !open ? chatSVGPath : closeChatSVGPath
               }
           ],
-          strokeWidth: widgetIsOpen ? 3 : 1,
+          strokeWidth: !open ? 3 : 1,
         });
-      setWidgetIsOpen(!widgetIsOpen);
+      setWidgetIsOpen(open);
     }
 
     // Toggle to initial Icon after the chat is ended by the chat Widget:
@@ -58,15 +63,11 @@ const ChatIcon = (props) =>
     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();
+            setWidgetIsOpen(false);
+            toggleChatIcon(false);
           });
       }
     }, [currentState]);

diff --git a/customChatWidget/src/containers/ChatForm/styled.js b/customChatWidget/src/containers/ChatForm/styled.js
@@ -13,7 +13,7 @@ export const FormSection = styled.div`
     width: 420px;
     bottom: 100px;
     right: 80px;
-    height: 600px;
+    height: 420px;
   }
   width: 320px;
   height: 450px;

diff --git a/customChatWidget/src/containers/ChatWidget/index.js b/customChatWidget/src/containers/ChatWidget/index.js
@@ -16,15 +16,29 @@ const { log, error, trace, info } = genLogger(name);
 const ChatWidget = ({
     dataFromInputForm = {},
     setCurrentState = () => log('No Function'),
-    setWidgetIsOpen
+    setWidgetIsOpen,
+    widgetIsOpen
     }) => {
     log(">>> Init");
     const [loading, setLoading ] = useState(true);
+    const [chatInitialized, setChatInitialized] = useState(false);
+    const [toggleToForm, setToggleToForm] = useState(false);
     const { primaryColor, description, region, apiGateway, contactFlowId, instanceId, enableAttachments } = useAppConfig();
     if (Object.keys(dataFromInputForm).length !== 0) log('dataFromInputForm: ', dataFromInputForm);
     // eslint-disable-next-line
     // eslint-disable-next-line
     const initialProperties = useAppConfig();
+
+    window.connect.ChatEvents &&
+    window.connect.ChatEvents.onAgentEndChat(() => {
+      setChatInitialized(false);
+    });
+
+    window.connect.ChatEvents &&
+        window.connect.ChatEvents.onChatEnded(() => {
+        setChatInitialized(false);
+    });
+
     const successHandler = (chatSession) => {
         info("successHandler");
         setLoading(false);
@@ -49,8 +63,7 @@ const ChatWidget = ({
         chatSession.onChatDisconnected(function (data) {
             info("Chat has been disconnected");
             trace(data);
-            if (Object.keys(dataFromInputForm).length !== 0) setCurrentState(chatWithFormStates.FORM);
-            setWidgetIsOpen((prev) => !prev);
+            if (Object.keys(dataFromInputForm).length !== 0) setToggleToForm(true);
         });
     };
 
@@ -136,27 +149,7 @@ const ChatWidget = ({
         return attrs;
     }
 
-    // eslint-disable-next-line
-    useEffect(() => {
-        log("useEffect");
-        try {
-            window.connect.ChatInterface.init({
-                containerId: 'chat-widget', // This is the id of the container where you want the widget to reside
-                headerConfig: {      // Use the optional headerConfig and footerConfig to customize your widget
-                    isHTML: true,
-                    render: () => {
-                    return (`<div class="header-wrapper">
-                                <h2 class="welcome-text">${description}</h2>
-                            </div>`)
-                    }
-                },
-            });
-        }
-        catch (e) {
-            error('window.connect.ChatInterface.init');
-            error(e);
-        }
-
+    const initializeChat = () => {
         // Set default name and username:
         const { name, username } = getNameAndUserName(dataFromInputForm, initialProperties.name, initialProperties.username);
         log('Name and username to initiate a chat connection: ', { name, username })
@@ -178,15 +171,45 @@ const ChatWidget = ({
             },
         }
         log('Params to initiate chat connection: ', params);
-
         try {
             window.connect.ChatInterface.initiateChat(params, successHandler, failureHandler);
+            setChatInitialized(true);
         }
         catch (e) {
             error('window.connect.ChatInterface.initiateChat');
             error(e);
+            setChatInitialized(false);
+        }
+    }
+
+    // eslint-disable-next-line
+    useEffect(() => {
+        log("useEffect");
+        try {
+            window.connect.ChatInterface.init({
+                containerId: 'chat-widget', // This is the id of the container where you want the widget to reside
+                headerConfig: {      // Use the optional headerConfig and footerConfig to customize your widget
+                    isHTML: true,
+                    render: () => {
+                    return (`<div class="header-wrapper">
+                                <h2 class="welcome-text">${description}</h2>
+                            </div>`)
+                    }
+                },
+            });
+        }
+        catch (e) {
+            error('window.connect.ChatInterface.init');
+            error(e);
+        }
+        if (toggleToForm && !widgetIsOpen) {
+            setCurrentState(chatWithFormStates.FORM);
+            setToggleToForm(false);
+        }
+        if (!chatInitialized) {
+            initializeChat();
         }
-    }, [])
+    }, [widgetIsOpen]);
 
     return (
         <ChatContainer id="chat-container" device={device}>

diff --git a/customChatWidget/src/containers/ChatWidget/styled.js b/customChatWidget/src/containers/ChatWidget/styled.js
@@ -37,7 +37,6 @@ export const ChatWrapper = styled.div`
 
     .connect-customer-interface{
         @media ${props => props.device.laptop}{
-        height: 600px;
         width: 420px;
         }
         height: 500px;
@@ -81,7 +80,7 @@ export const ChatContainer = styled.div`
         height: 100%;
         max-width: 448px;
         max-height: 630px;
-        bottom: 90px;
+        bottom: 15px;
         right: 75px;
     }
     position: fixed;

diff --git a/customChatWidget/src/views/ChatWithForm/index.js b/customChatWidget/src/views/ChatWithForm/index.js
@@ -51,7 +51,7 @@ const ChatWithForm = () => {
                     currentState === chatWithFormStates.FORM ? (
                     <ChatForm  setData={setData} setCurrentState={setCurrentState} />
                     ) : (
-                        <ChatWidget dataFromInputForm={data} setCurrentState={setCurrentState} setWidgetIsOpen={setWidgetIsOpen} />
+                        <ChatWidget dataFromInputForm={data} setCurrentState={setCurrentState} setWidgetIsOpen={setWidgetIsOpen} widgetIsOpen={widgetIsOpen} />
                     )
                 }
                 </CSSTransition>

diff --git a/customChatWidget/src/views/ChatWithoutForm/index.js b/customChatWidget/src/views/ChatWithoutForm/index.js
@@ -55,6 +55,7 @@ const ChatWithoutForm = () => {
                         forceUnmountChatWidget ? <div></div> : (
                             <ChatWidget
                                 setWidgetIsOpen={setWidgetIsOpen}
+                                widgetIsOpen={widgetIsOpen}
                             />
                         )
                     }