@defra/flood-webchat 0.0.1-beta.37 → 0.0.1-beta.38-draft

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,7 +35,8 @@ 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 onClick = e => {
@@ -58,6 +61,14 @@ function Availability() {
       setChatVisibility(!isChatOpen);
     }
   };
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    if (!isChatOpen && unseenCount > 0) {
+      setLiveRegionText(`Floodline Webchat - ${unseenCount} new messages`);
+    }
+    return () => {
+      setLiveRegionText();
+    };
+  }, [unseenCount, isChatOpen]);
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const onScroll = () => {
       if (!threadId) {
@@ -100,9 +111,9 @@ function Availability() {
         onKeyDown: onKeyDown,
         role: "button",
         "data-module": "govuk-button"
-      }, TextComponent, unseenCount > 0 && !isChatOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+      }, TextComponent, unseenCount > 0 && !isChatOpen ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__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), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_live_region_jsx__WEBPACK_IMPORTED_MODULE_6__.LiveRegion, null)) : 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));
     case 'EXISTING':
     case 'UNAVAILABLE':
       return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
@@ -135,6 +146,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
 /* harmony import */ var _hooks_useTextareaAutosize_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../../hooks/useTextareaAutosize.js */ "./src/client/hooks/useTextareaAutosize.js");
 /* harmony import */ var _lib_transform_messages_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../../lib/transform-messages.js */ "./src/client/lib/transform-messages.js");
+/* harmony import */ var _lib_agent_status_headline_js__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../../lib/agent-status-headline.js */ "./src/client/lib/agent-status-headline.js");
+
 
 
 
@@ -153,8 +166,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);
@@ -178,25 +193,40 @@ function Chat({
     setUserMessage(e.target?.value);
   };
   const agentName = agent?.nickname || agent?.firstName;
-  let connectionHeadlineText = 'Connecting to Floodline';
-  if (agentStatus === 'closed') {
-    connectionHeadlineText = agentName ? `${agentName} ended the session` : 'Session ended by advisor';
-  } else if (agentStatus) {
-    if (agentName) {
-      connectionHeadlineText = `You are speaking with ${agentName}`;
-    } else {
-      connectionHeadlineText = 'No advisers currently available';
+  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}`);
     }
-  }
-  if (availability === 'UNAVAILABLE') {
-    connectionHeadlineText = 'Webchat is not currently available';
-  }
+    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 (lastAgentMessage?.direction === 'outbound') {
+      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`);
+    }
+    return () => {
+      setLiveRegionText();
+    };
+  }, [messages]);
   const sendMessage = () => {
     if (messageRef.current.value.length === 0) {
       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);
     }
@@ -390,6 +420,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 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);
+    }
+  }, 2000), [textA, textB]);
+  (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    console.log('liveRegionText', liveRegionText);
+    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 ***!
@@ -570,10 +666,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");
+
 
 
 
@@ -602,13 +700,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) {
@@ -616,7 +714,7 @@ function Panel() {
         setUnseenCount(0);
       }
       setChatVisibility(false);
-      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_13__.historyReplaceState)();
+      (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_14__.historyReplaceState)();
       document.getElementById(instigatorId)?.focus();
     }
   }, [thread, threadId, setUnseenCount, setChatVisibility]);
@@ -732,7 +830,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));
 }
 
@@ -752,6 +850,8 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
 /* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _lib_history_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../../lib/history.js */ "./src/client/lib/history.js");
+
 
 
 
@@ -780,6 +880,7 @@ function EndChat({
     if (agentStatus !== 'closed') {
       thread.endChat();
     }
+    (0,_lib_history_js__WEBPACK_IMPORTED_MODULE_3__.historyReplaceState)();
     onEndChatConfirm(e);
   };
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -1391,6 +1492,35 @@ const useTextareaAutosize = (textAreaRef, value) => {
 
 /***/ }),
 
+/***/ "./src/client/lib/agent-status-headline.js":
+/*!*************************************************!*\
+  !*** ./src/client/lib/agent-status-headline.js ***!
+  \*************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   agentStatusHeadline: () => (/* binding */ agentStatusHeadline)
+/* harmony export */ });
+const agentStatusHeadline = (availability, agentStatus, agentName) => {
+  let connectionHeadlineText = 'Connecting to Floodline';
+  if (agentStatus === 'closed') {
+    connectionHeadlineText = agentName ? `${agentName} ended the session` : 'Session ended by advisor';
+  } else if (agentStatus) {
+    if (agentName) {
+      connectionHeadlineText = `You are speaking with ${agentName}`;
+    } else {
+      connectionHeadlineText = 'No advisers currently available';
+    }
+  }
+  if (availability === 'UNAVAILABLE') {
+    connectionHeadlineText = 'Webchat is not currently available';
+  }
+  return connectionHeadlineText;
+};
+
+/***/ }),
+
 /***/ "./src/client/lib/check-availability.js":
 /*!**********************************************!*\
   !*** ./src/client/lib/check-availability.js ***!
@@ -1598,7 +1728,7 @@ const AppProvider = ({
       payload: e.detail.data.case.status
     });
   };
-  const onAgentTypingStarted = () => {
+  const onAgentTypingStarted = e => {
     dispatch({
       type: 'SET_AGENT_TYPING',
       payload: true
@@ -1609,6 +1739,9 @@ const AppProvider = ({
       type: 'SET_AGENT_TYPING',
       payload: false
     });
+    dispatch({
+      type: 'SET_LIVE_REGION_TEXT'
+    });
   };
   const onMessageCreated = e => {
     dispatch({
@@ -1754,6 +1887,12 @@ const AppProvider = ({
       payload: id
     });
   };
+  const setLiveRegionText = text => {
+    dispatch({
+      type: 'SET_LIVE_REGION_TEXT',
+      payload: text
+    });
+  };
 
   /**
    * Application-wide state and state functions
@@ -1769,6 +1908,7 @@ const AppProvider = ({
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
+    setLiveRegionText,
     onLiveChatRecovered,
     onAssignedAgentChanged,
     onAgentTypingStarted,
@@ -1848,16 +1988,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) => {
@@ -1890,6 +2031,12 @@ const setInstigatorId = (state, payload) => {
     instigatorId: payload
   };
 };
+const setLiveRegionText = (state, payload) => {
+  return {
+    ...state,
+    liveRegionText: payload
+  };
+};
 const toggleIsMobile = (state, payload) => {
   return {
     ...state,
@@ -1916,6 +2063,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
 };
@@ -2062,6 +2210,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" ***!