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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.38-draft",
+  "version": "0.0.1-beta.39",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",
@@ -62,7 +62,6 @@
     "@nice-devone/nice-cxone-chat-web-sdk": "^1.3.0",
     "axios": "^1.5.0",
     "jwt-decode": "^3.1.2",
-    "lodash.debounce": "^4.0.8",
     "luxon": "^3.4.3",
     "querystring": "^0.2.1",
     "react": "^18.2.0",

package/src/client/components/availability/availability.jsx

@@ -6,10 +6,9 @@ import { SkipLink } from '../skip-link.jsx'
 
 import { useApp } from '../../store/useApp'
 import { historyPushState, historyReplaceState } from '../../lib/history.js'
-import { LiveRegion } from '../live-region.jsx'
 
 export function Availability () {
-  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId, setLiveRegionText } = useApp()
+  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId } = useApp()
 
   const buttonRef = useRef()
 
@@ -39,16 +38,6 @@ export function Availability () {
     }
   }
 
-  useEffect(() => {
-    if (!isChatOpen && unseenCount > 0) {
-      setLiveRegionText(`Floodline Webchat - ${unseenCount} new messages`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [unseenCount, isChatOpen])
-
   useEffect(() => {
     const onScroll = () => {
       if (!threadId) {
@@ -104,14 +93,7 @@ export function Availability () {
                 data-module='govuk-button'
               >
                 {TextComponent}
-                {unseenCount > 0 && !isChatOpen
-                  ? (
-                    <>
-                      <span className='wc-availability__unseen'>{unseenCount}</span>
-                      <LiveRegion />
-                    </>
-                    )
-                  : null}
+                {unseenCount > 0 && !isChatOpen ? <span className='wc-availability__unseen'>{unseenCount}</span> : null}
               </a>
             </div>
           </div>

package/src/client/components/availability/availability.scss

@@ -11,6 +11,10 @@
   right: 0;
   padding-left: 15px;
   padding-right: 15px;
+  border: 1px solid transparent;
+  @media (forced-colors: active) {
+    border-color: currentColor;
+  }
 
   @include mq ($from: 'tablet') {
     padding-left: 30px;
@@ -47,6 +51,10 @@
 .wc-availability__unseen {
   display: inline-block;
   position: relative;
+  border: 1px solid transparent;
+  @media (forced-colors: active) {
+    border-color: currentColor;
+  }
   border-radius: 10px;
   background-color: govuk-colour('black');
   color: govuk-colour('white');

package/src/client/components/chat/chat.jsx

@@ -10,7 +10,7 @@ import { formatTranscript } from '../../lib/transform-messages.js'
 import { agentStatusHeadline } from '../../lib/agent-status-headline.js'
 
 export function Chat ({ onEndChatScreen, onSettingsScreen }) {
-  const { availability, thread, messages, agent, agentStatus, isAgentTyping, isChatOpen, settings, isKeyboard, setLiveRegionText } = useApp()
+  const { availability, thread, messages, agent, agentStatus, isAgentTyping, settings, isKeyboard } = useApp()
 
   const [userMessage, setUserMessage] = useState('')
   const [focusVisibleWithin, setFocusVisibleWithin] = useState(false)
@@ -44,47 +44,13 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
 
   const connectionHeadlineText = agentStatusHeadline(availability, agentStatus, agentName)
 
-  useEffect(() => {
-    if (connectionHeadlineText) {
-      setLiveRegionText(`Floodline Webchat - ${connectionHeadlineText}`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [connectionHeadlineText])
-
-  useEffect(() => {
-    if (isAgentTyping && isChatOpen) {
-      setLiveRegionText(`${agentName} is typing...`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [isAgentTyping, isChatOpen])
-
-  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) {
+    if (messageRef.current.value.length === 0 || agentStatus === 'closed') {
       return
     }
 
     try {
-      const message = messageRef.current.value.trim()
-      thread.sendTextMessage(message)
-      setLiveRegionText(`You said: ${message}`)
+      thread.sendTextMessage(messageRef.current.value.trim())
     } catch (err) {
       console.log('[Chat Error] sendMessage', err)
     }
@@ -124,10 +90,12 @@ export function Chat ({ onEndChatScreen, onSettingsScreen }) {
         default:
           break
       }
-    } else if (e.key === ' ') {
+    }
+    if (e.key === ' ') {
       if (e.target.id === 'end-chat') {
         onEndChatScreen(e)
-      } else if (e.target.id === 'wc-settings') {
+      }
+      if (e.target.id === 'wc-settings') {
         onSettingsScreen(e)
       }
     }

package/src/client/components/chat/chat.scss

@@ -82,6 +82,11 @@
     padding: 10px 12.5px;
     margin-bottom: 0;
     display: inline-block;
+    border: 1px solid transparent;
+
+    @media (forced-colors: active) {
+      border-color: currentColor;
+    }
 
     &.inbound {
       color: govuk-colour('white');
@@ -98,10 +103,17 @@
       display: block;
       color: govuk-colour('dark-grey');
     }
+    
+    @media (forced-colors: active) {
+      svg {
+        color: currentColor;
+      }
+    }
+    
 
     svg circle {
       animation: 1s blink infinite;
-      fill: currentcolor;
+      fill: currentColor;
 
       &:nth-child(2) {
         animation-delay: 250ms

package/src/client/components/panel/panel.jsx

@@ -9,7 +9,6 @@ import { Unavailable } from '../screens/unavailable.jsx'
 import { EndChat } from '../screens/end-chat.jsx'
 import { Settings } from '../screens/settings.jsx'
 import { Feedback } from '../screens/feedback.jsx'
-import { LiveRegion } from '../live-region.jsx'
 
 import { useApp } from '../../store/useApp.js'
 import { useChatSdk } from '../../store/useChatSdk.js'
@@ -137,7 +136,6 @@ export function Panel () {
       <div className='wc-panel__inner'>
         {ScreenComponent}
       </div>
-      <LiveRegion />
     </div>
   )
 

package/src/client/components/screens/end-chat.jsx

@@ -1,14 +1,14 @@
 import React, { useEffect } from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 import { useApp } from '../../store/useApp.js'
-import { historyReplaceState } from '../../lib/history.js'
 
 export function EndChat ({ onChatScreen, onEndChatConfirm }) {
-  const { setCustomerId, setThreadId, setMessages, agentStatus, thread, setUnseenCount, isKeyboard } = useApp()
+  const { setCustomerId, setThreadId, setMessages, agentStatus, thread, threadId, setUnseenCount, isKeyboard } = useApp()
 
   const confirmEndChat = async e => {
     e.preventDefault()
 
+    window.localStorage.setItem('tmpThreadId', threadId)
     setThreadId()
     setMessages([])
     setCustomerId()
@@ -20,7 +20,6 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
       thread.endChat()
     }
 
-    historyReplaceState()
     onEndChatConfirm(e)
   }
 
@@ -35,7 +34,8 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
   const handleKeyPress = e => {
     if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'confirm-endchat') {
       confirmEndChat(e)
-    } else if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'resume-chat') {
+    }
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'resume-chat') {
       onChatScreen(e)
     }
   }

package/src/client/components/screens/feedback.jsx

@@ -1,14 +1,25 @@
 import React from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
-
 export function Feedback ({ onCancel }) {
-  const feedbackCancel = async e => {
+  const feedbackSend = e => {
+    const tmpThreadId = window.localStorage.getItem('tmpThreadId')
+    window.location.href = `https://defragroup.eu.qualtrics.com/jfe/form/SV_8dgFSJcxxIfqx5Y?Id=${tmpThreadId}&Source=${window.location.href}`
+    window.localStorage.removeItem('tmpThreadId')
+    onCancel(e)
+  }
+
+  const feedbackClose = async e => {
     onCancel(e)
   }
 
   const handleKeyPress = e => {
-    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'feedback-cancel') {
-      onCancel(e)
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (e.target.id === 'feedback-close') {
+        feedbackClose(e)
+      }
+      if (e.target.id === 'feedback-send') {
+        feedbackSend(e)
+      }
     }
   }
 
@@ -22,23 +33,26 @@ export function Feedback ({ onCancel }) {
           <p>Please note we’re unable to respond to feedback.</p>
           <p>
             <a
+              id='feedback-send'
               className='govuk-link'
               href='#'
               target='_blank'
               rel='noreferrer'
+              onKeyDown={handleKeyPress}
+              onClick={feedbackSend}
             >
-              Feedback Link
+              Leave Feedback
             </a>
           </p>
           <p>
             <a
-              id='feedback-cancel'
+              id='feedback-close'
               className='wc-link govuk-link'
               href='#'
               data-module='govuk-button'
               role='button'
               onKeyDown={handleKeyPress}
-              onClick={feedbackCancel}
+              onClick={feedbackClose}
             >
               Close
             </a>

package/src/client/components/screens/request-chat.jsx

@@ -44,6 +44,10 @@ export function RequestChat ({ onPreChatScreen }) {
   const onRequestChat = async e => {
     e.preventDefault()
 
+    if (isButtonDisabled) {
+      return
+    }
+
     const errs = {}
 
     if (nameRef.current.value.length === 0) {
@@ -161,7 +165,7 @@ export function RequestChat ({ onPreChatScreen }) {
               className='wc-button govuk-button govuk-!-margin-top-1'
               data-module='govuk-button'
               onClick={onRequestChat}
-              disabled={isButtonDisabled}
+              aria-disabled={isButtonDisabled}
             >
               {buttonLabel}
             </button>

package/src/client/components/skip-link.jsx

@@ -3,9 +3,9 @@ import { createPortal } from 'react-dom'
 import { useApp } from '../store/useApp'
 
 export const SkipLink = () => {
-  const { thread, setInstigatorId } = useApp()
+  const { threadId, setInstigatorId } = useApp()
 
-  if (!thread) {
+  if (!threadId) {
     return null
   }
 

package/src/client/lib/agent-status-headline.js

@@ -1,19 +1,17 @@
 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') {
+    return 'Webchat is not currently available'
   }
 
-  if (availability === 'UNAVAILABLE') {
-    connectionHeadlineText = 'Webchat is not currently available'
+  if (!agentStatus) {
+    return 'Connecting to Floodline'
   }
 
-  return connectionHeadlineText
+  switch (agentStatus) {
+    case 'closed':
+    case 'resolved':
+      return agentName ? `${agentName} ended the session` : 'Session ended by advisor'
+    default:
+      return agentName ? `You are speaking with ${agentName}` : 'No advisers currently available'
+  }
 }

package/src/client/scss/_settings.scss

@@ -30,6 +30,11 @@
     font-size: 16px;
 }
 
+.wc-button[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
 .wc-label {
     font-size: 16px;
     line-height: 1.25;
@@ -73,24 +78,3 @@
     line-height: 1.25;
     margin: 0 0 25px;
 }
-
-// stylelint-disable declaration-no-important
-.wc-live {
-    position: absolute !important;
-    width: 1px !important;
-    height: 1px !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-    clip: rect(0 0 0 0) !important;
-    -webkit-clip-path: inset(50%) !important;
-    clip-path: inset(50%) !important;
-    border: 0 !important;
-    white-space: nowrap !important;
-
-    &::before,
-    &::after {
-        content: ' ';
-    }
-}
-// stylelint-enable declaration-no-important

package/src/client/store/AppProvider.jsx

@@ -27,13 +27,12 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
   }
 
-  const onAgentTypingStarted = e => {
+  const onAgentTypingStarted = () => {
     dispatch({ type: 'SET_AGENT_TYPING', payload: true })
   }
 
   const onAgentTypingEnded = () => {
     dispatch({ type: 'SET_AGENT_TYPING', payload: false })
-    dispatch({ type: 'SET_LIVE_REGION_TEXT' })
   }
 
   const onMessageCreated = e => {
@@ -150,10 +149,6 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     dispatch({ type: 'SET_INSTIGATOR_ID', payload: id })
   }
 
-  const setLiveRegionText = text => {
-    dispatch({ type: 'SET_LIVE_REGION_TEXT', payload: text })
-  }
-
   /**
    * Application-wide state and state functions
    */
@@ -168,7 +163,6 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
-    setLiveRegionText,
     onLiveChatRecovered,
     onAssignedAgentChanged,
     onAgentTypingStarted,

package/src/client/store/actions-map.js

@@ -61,18 +61,17 @@ const setThread = (state, payload) => {
   }
 }
 
-const setMessages = (state, payload) => {
+const setMessage = (state, payload) => {
   return {
     ...state,
-    messages: transformMessages(payload).reverse()
+    messages: [...state.messages, transformMessage(payload)]
   }
 }
 
-const setMessage = (state, payload) => {
+const setMessages = (state, payload) => {
   return {
     ...state,
-    message: transformMessage(payload),
-    messages: [...state.messages, transformMessage(payload)]
+    messages: transformMessages(payload).reverse()
   }
 }
 
@@ -111,13 +110,6 @@ const setInstigatorId = (state, payload) => {
   }
 }
 
-const setLiveRegionText = (state, payload) => {
-  return {
-    ...state,
-    liveRegionText: payload
-  }
-}
-
 const toggleIsMobile = (state, payload) => {
   return {
     ...state,
@@ -146,7 +138,6 @@ export 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
 }

package/src/client/components/live-region.jsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react'
-import debounce from 'lodash.debounce'
-import { useApp } from '../store/useApp'
-
-export const LiveRegion = () => {
-  const { agentStatus, liveRegionText, setLiveRegionText } = useApp()
-
-  const [textA, setTextA] = useState()
-  const [textB, setTextB] = useState()
-
-  const isSessionEnded = agentStatus === 'closed' || agentStatus === null
-
-  const clearText = () => {
-    setTextA()
-    setTextB()
-  }
-
-  const setText = useCallback(debounce(text => {
-    if (textA) {
-      setTextB(text)
-    } else {
-      setTextA(text)
-    }
-  }, 2000), [textA, textB])
-
-  useEffect(() => {
-    console.log('liveRegionText', liveRegionText)
-
-    if (liveRegionText) {
-      clearText()
-      setText(liveRegionText)
-    }
-
-    if (isSessionEnded) {
-      clearText()
-      setLiveRegionText()
-    }
-
-    return () => {
-      clearText()
-      setLiveRegionText()
-    }
-  }, [liveRegionText])
-
-  return (
-    <>
-      <div className='wc-live' aria-live='polite' aria-atomic='true'>
-        {textA}
-      </div>
-      <div className='wc-live' aria-live='polite' aria-atomic='true'>
-        {textB}
-      </div>
-    </>
-  )
-}