@defra/flood-webchat 0.0.1-beta.40 → 0.0.1-beta.41

package/dist/client.js

@@ -19,6 +19,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _skip_link_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../skip-link.jsx */ "./src/client/components/skip-link.jsx");
 /* harmony import */ var _store_useApp__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store/useApp */ "./src/client/store/useApp.js");
 /* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+/* harmony import */ var _live_region_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../live-region.jsx */ "./src/client/components/live-region.jsx");
+
 
 
 
@@ -33,9 +35,11 @@ function Availability() {
     unseenCount,
     threadId,
     setUnseenCount,
-    setInstigatorId
+    setInstigatorId,
+    setLiveRegionText
   } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_4__.useApp)();
   const buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
+  const showUnseenCount = unseenCount > 0 && !isChatOpen;
   const onClick = e => {
     e.preventDefault();
     setUnseenCount(0);
@@ -58,6 +62,14 @@ function Availability() {
       setChatVisibility(!isChatOpen);
     }
   };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (showUnseenCount) {
+      setLiveRegionText(`Floodline Webchat - ${unseenCount} new messages`);
+    }
+    return () => {
+      setLiveRegionText();
+    };
+  }, [unseenCount, isChatOpen]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const onScroll = () => {
       if (!threadId) {
@@ -79,10 +91,6 @@ function Availability() {
       document.removeEventListener('scroll', onScroll);
     };
   }, [threadId, isChatOpen, availability]);
-  let TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Show chat");
-  if (!threadId) {
-    TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Start chat");
-  }
   switch (availability) {
     case 'AVAILABLE':
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
@@ -100,9 +108,9 @@ function Availability() {
         onKeyDown: onKeyDown,
         role: "button",
         "data-module": "govuk-button"
-      }, TextComponent, unseenCount > 0 && !isChatOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      }, !threadId ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Start chat") : /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Show chat"), showUnseenCount ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
         className: "wc-availability__unseen"
-      }, unseenCount) : null))), isChatOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__.Panel, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_skip_link_jsx__WEBPACK_IMPORTED_MODULE_3__.SkipLink, null));
+      }, unseenCount) : null))), isChatOpen && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_jsx__WEBPACK_IMPORTED_MODULE_2__.Panel, null), showUnseenCount ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_live_region_jsx__WEBPACK_IMPORTED_MODULE_6__.LiveRegion, null) : null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_skip_link_jsx__WEBPACK_IMPORTED_MODULE_3__.SkipLink, null));
     case 'EXISTING':
     case 'UNAVAILABLE':
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -155,8 +163,10 @@ function Chat({
     agent,
     agentStatus,
     isAgentTyping,
+    isChatOpen,
     settings,
-    isKeyboard
+    isKeyboard,
+    setLiveRegionText
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_4__.useApp)();
   const [userMessage, setUserMessage] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)('');
   const [focusVisibleWithin, setFocusVisibleWithin] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
@@ -181,12 +191,39 @@ function Chat({
   };
   const agentName = agent?.nickname || agent?.firstName;
   const connectionHeadlineText = (0,_lib_agent_status_headline_js__WEBPACK_IMPORTED_MODULE_7__.agentStatusHeadline)(availability, agentStatus, agentName);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (connectionHeadlineText) {
+      setLiveRegionText(`Floodline Webchat - ${connectionHeadlineText}`);
+    }
+    return () => {
+      setLiveRegionText();
+    };
+  }, [connectionHeadlineText]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (isAgentTyping && isChatOpen) {
+      setLiveRegionText(`${agentName} is typing...`);
+    }
+    return () => {
+      setLiveRegionText();
+    };
+  }, [isAgentTyping, isChatOpen]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    const lastAgentMessage = messages[messages.length - 1];
+    if (agentStatus !== 'closed' && lastAgentMessage?.direction === 'outbound') {
+      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`);
+    }
+    return () => {
+      setLiveRegionText();
+    };
+  }, [messages]);
   const sendMessage = () => {
     if (messageRef.current.value.length === 0 || agentStatus === 'closed') {
       return;
     }
     try {
-      thread.sendTextMessage(messageRef.current.value.trim());
+      const message = messageRef.current.value.trim();
+      thread.sendTextMessage(message);
+      setLiveRegionText(`You said: ${message}`);
     } catch (err) {
       console.log('[Chat Error] sendMessage', err);
     }
@@ -382,6 +419,72 @@ const ErrorSummary = ({
 
 /***/ }),
 
+/***/ "./src/client/components/live-region.jsx":
+/*!***********************************************!*\
+  !*** ./src/client/components/live-region.jsx ***!
+  \***********************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   LiveRegion: () => (/* binding */ LiveRegion)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! lodash.debounce */ "lodash.debounce");
+/* harmony import */ var lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(lodash_debounce__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _store_useApp__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../store/useApp */ "./src/client/store/useApp.js");
+
+
+
+const DEBOUNCE_MILLISECONDS = 2000;
+const LiveRegion = () => {
+  const {
+    agentStatus,
+    liveRegionText,
+    setLiveRegionText
+  } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_2__.useApp)();
+  const [textA, setTextA] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
+  const [textB, setTextB] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)();
+  const isSessionEnded = agentStatus === 'closed' || agentStatus === null;
+  const clearText = () => {
+    setTextA();
+    setTextB();
+  };
+  const setText = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(lodash_debounce__WEBPACK_IMPORTED_MODULE_1___default()(text => {
+    if (textA) {
+      setTextB(text);
+    } else {
+      setTextA(text);
+    }
+  }, DEBOUNCE_MILLISECONDS), [textA, textB]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (liveRegionText) {
+      clearText();
+      setText(liveRegionText);
+    }
+    if (isSessionEnded) {
+      clearText();
+      setLiveRegionText();
+    }
+    return () => {
+      clearText();
+      setLiveRegionText();
+    };
+  }, [liveRegionText]);
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-live",
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, textA), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-live",
+    "aria-live": "polite",
+    "aria-atomic": "true"
+  }, textB));
+};
+
+/***/ }),
+
 /***/ "./src/client/components/message/message.jsx":
 /*!***************************************************!*\
   !*** ./src/client/components/message/message.jsx ***!
@@ -562,10 +665,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../screens/end-chat.jsx */ "./src/client/components/screens/end-chat.jsx");
 /* harmony import */ var _screens_settings_jsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../screens/settings.jsx */ "./src/client/components/screens/settings.jsx");
 /* harmony import */ var _screens_feedback_jsx__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../screens/feedback.jsx */ "./src/client/components/screens/feedback.jsx");
-/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
-/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
-/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
-/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+/* harmony import */ var _live_region_jsx__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../live-region.jsx */ "./src/client/components/live-region.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
+/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+
 
 
 
@@ -594,13 +699,13 @@ function Panel() {
     setUnseenCount,
     isMobile,
     isKeyboard
-  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_10__.useApp)();
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_11__.useApp)();
   const {
     fetchThread,
     fetchMessages
-  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_11__.useChatSdk)(sdk);
+  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_12__.useChatSdk)(sdk);
   const [screen, setScreen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(threadId ? 2 : 0);
-  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_12__.useFocusedElements)(screen);
+  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_13__.useFocusedElements)(screen);
   const onEscapeKey = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {
     if (e.key === 'Escape' || e.key === 'Esc') {
       if (threadId) {
@@ -608,11 +713,19 @@ function Panel() {
         setUnseenCount(0);
       }
       setChatVisibility(false);
-      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_13__.historyReplaceState)();
-      document.getElementById(instigatorId)?.focus();
+      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_14__.historyReplaceState)();
     }
   }, [thread, threadId, setUnseenCount, setChatVisibility]);
 
+  /**
+   * Focus previously focused element when closing the webchat
+   */
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    return () => {
+      document.getElementById(instigatorId)?.focus();
+    };
+  }, []);
+
   /**
   * We need ammend classes on the body element to handle mobile behaviour
   */
@@ -699,7 +812,10 @@ function Panel() {
       break;
     case 4:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_feedback_jsx__WEBPACK_IMPORTED_MODULE_9__.Feedback, {
-        onCancel: () => setChatVisibility(false)
+        onCancel: () => {
+          setChatVisibility(false);
+          (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_14__.historyReplaceState)();
+        }
       });
       break;
     case 5:
@@ -724,7 +840,7 @@ function Panel() {
     "aria-labelledby": "wc-header-title"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-panel__inner"
-  }, ScreenComponent));
+  }, ScreenComponent), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_live_region_jsx__WEBPACK_IMPORTED_MODULE_10__.LiveRegion, null));
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/(0,react_dom__WEBPACK_IMPORTED_MODULE_1__.createPortal)(Component, document.body));
 }
 
@@ -979,7 +1095,8 @@ function RequestChat({
     sdk,
     setCustomerId,
     setThreadId,
-    setThread
+    setThread,
+    setLiveRegionText
   } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_4__.useApp)();
   const {
     fetchCustomerId,
@@ -1006,6 +1123,11 @@ function RequestChat({
     setQuestionLength(e.target.value.length);
   };
   const buttonLabel = isButtonDisabled ? 'Requesting...' : 'Request Chat';
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (isButtonDisabled) {
+      setLiveRegionText(buttonLabel);
+    }
+  }, [isButtonDisabled]);
   const onRequestChat = async e => {
     e.preventDefault();
     if (isButtonDisabled) {
@@ -1650,6 +1772,9 @@ const AppProvider = ({
       type: 'SET_AGENT_TYPING',
       payload: false
     });
+    dispatch({
+      type: 'SET_LIVE_REGION_TEXT'
+    });
   };
   const onMessageCreated = e => {
     dispatch({
@@ -1732,13 +1857,14 @@ const AppProvider = ({
     if (window.location.hash === '#webchat') {
       setChatVisibility(true);
     }
-    const onBrowserNavigation = window.addEventListener('popstate', () => {
+    const onBrowserNavigation = () => {
       if (window.location.hash === '#webchat') {
         setChatVisibility(true);
       } else {
         setChatVisibility(false);
       }
-    });
+    };
+    window.addEventListener('popstate', onBrowserNavigation);
     return () => {
       window.removeEventListener('popstate', onBrowserNavigation);
     };
@@ -1795,6 +1921,12 @@ const AppProvider = ({
       payload: id
     });
   };
+  const setLiveRegionText = text => {
+    dispatch({
+      type: 'SET_LIVE_REGION_TEXT',
+      payload: text
+    });
+  };
 
   /**
    * Application-wide state and state functions
@@ -1810,6 +1942,7 @@ const AppProvider = ({
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
+    setLiveRegionText,
     onLiveChatRecovered,
     onAssignedAgentChanged,
     onAgentTypingStarted,
@@ -1889,16 +2022,17 @@ const setThread = (state, payload) => {
     thread: payload
   };
 };
-const setMessage = (state, payload) => {
+const setMessages = (state, payload) => {
   return {
     ...state,
-    messages: [...state.messages, (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessage)(payload)]
+    messages: (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessages)(payload).reverse()
   };
 };
-const setMessages = (state, payload) => {
+const setMessage = (state, payload) => {
   return {
     ...state,
-    messages: (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessages)(payload).reverse()
+    message: (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessage)(payload),
+    messages: [...state.messages, (0,_lib_transform_messages__WEBPACK_IMPORTED_MODULE_0__.transformMessage)(payload)]
   };
 };
 const setAgent = (state, payload) => {
@@ -1931,6 +2065,12 @@ const setInstigatorId = (state, payload) => {
     instigatorId: payload
   };
 };
+const setLiveRegionText = (state, payload) => {
+  return {
+    ...state,
+    liveRegionText: payload
+  };
+};
 const toggleIsMobile = (state, payload) => {
   return {
     ...state,
@@ -1957,6 +2097,7 @@ const actionsMap = {
   SET_AGENT_STATUS: setAgentStatus,
   SET_UNSEEN_COUNT: setUnseenCount,
   SET_INSTIGATOR_ID: setInstigatorId,
+  SET_LIVE_REGION_TEXT: setLiveRegionText,
   TOGGLE_IS_MOBILE: toggleIsMobile,
   TOGGLE_IS_KEYBOARD: toggleIsKeyboard
 };
@@ -2103,6 +2244,16 @@ module.exports = require("@nice-devone/nice-cxone-chat-web-sdk");
 
 /***/ }),
 
+/***/ "lodash.debounce":
+/*!**********************************!*\
+  !*** external "lodash.debounce" ***!
+  \**********************************/
+/***/ ((module) => {
+
+module.exports = require("lodash.debounce");
+
+/***/ }),
+
 /***/ "luxon":
 /*!************************!*\
   !*** external "luxon" ***!