@defra/flood-webchat 1.0.9 → 1.0.11

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 
-import { useApp } from '../../store/app/useApp.js'
+import { useApp } from '../../store/useApp.js'
 
 export function Settings ({ onCancel }) {
   const { settings, setSettings } = useApp()

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

@@ -7,18 +7,16 @@ export function Unavailable () {
       <PanelHeader />
 
       <div className='wc-body'>
-        <div className='wc-content'>
-          <h3 id='wc-subtitle' className='govuk-heading-m'>Webchat is currently not available</h3>
-          <p className='govuk-body-s'>Try again later, or call Floodline:</p>
-          <p className='govuk-body-s'>
-            <strong>Floodline helpline</strong>
-            <br />Telephone: 0345 988 1188
-            <br />Textphone: 0345 602 6340
-            <br />Open 24 hours a day, 7 days a week
-            <br /><a className='govuk-link' href='https://gov.uk/call-charges'>Find out more about call charges</a>
-          </p>
-          <p className='govuk-body-s'>We're running webchat as a trial, it will not always be available.</p>
-        </div>
+        <h3 id='wc-subtitle' className='govuk-heading-m'>Webchat is currently not available</h3>
+        <p className='govuk-body-s'>Try again later, or call Floodline:</p>
+        <p className='govuk-body-s'>
+          <strong>Floodline helpline</strong>
+          <br />Telephone: 0345 988 1188
+          <br />Textphone: 0345 602 6340
+          <br />Open 24 hours a day, 7 days a week
+          <br /><a className='govuk-link' href='https://gov.uk/call-charges'>Find out more about call charges</a>
+        </p>
+        <p className='govuk-body-s'>We're running webchat as a trial, it will not always be available.</p>
       </div>
     </>
   )

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import { createPortal } from 'react-dom'
-import { useApp } from '../store/app/useApp'
+import { useApp } from '../store/useApp'
 
 export const SkipLink = () => {
   const { threadId, setInstigatorId } = useApp()

package/src/client/hooks/useFocusedElements.js

@@ -32,7 +32,7 @@ export const getFocusableElements = () => {
   return Array.from(elements).filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
 }
 
-const useFocusedElements = (screen, isChatOpen) => {
+const useFocusedElements = screen => {
   const [panelElements, setPanelElements] = useState([])
 
   const onKeyDown = useCallback(e => {
@@ -63,20 +63,18 @@ const useFocusedElements = (screen, isChatOpen) => {
   }, [screen])
 
   useEffect(() => {
-    if (isChatOpen) {
-      setAriaHidden(true)
+    setAriaHidden(true)
 
-      const panelElement = document.querySelector('#wc-panel')
-      panelElement.focus()
+    const panelElement = document.querySelector('#wc-panel')
+    panelElement.focus()
 
-      document.addEventListener('keydown', onKeyDown)
-    }
+    document.addEventListener('keydown', onKeyDown)
 
     return () => {
       setAriaHidden()
       document.removeEventListener('keydown', onKeyDown)
     }
-  }, [panelElements, isChatOpen])
+  }, [panelElements])
 }
 
 export { useFocusedElements }

package/src/client/index.jsx

@@ -3,44 +3,31 @@ import { createRoot } from 'react-dom/client'
 import { ChatSdk } from '@nice-devone/nice-cxone-chat-web-sdk'
 import { Availability } from './components/availability/availability.jsx'
 import { checkAvailability } from './lib/check-availability'
-import { AppProvider } from './store/app/AppProvider.jsx'
+import { AppProvider } from './store/AppProvider.jsx'
 import { CUSTOMER_ID_STORAGE_KEY } from './store/constants.js'
 import { messageNotification } from './lib/message-notification.js'
-import { SkipLink } from './components/skip-link.jsx'
-import { Panel } from './components/panel/panel.jsx'
 
 export async function init (container, options) {
-  const root = createRoot(container)
-
-  const initSdk = () => {
-    return new ChatSdk({
-      brandId: options.brandId,
-      channelId: options.channelId,
-      customerId: window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY) || '',
-      environment: options.environment,
-      onError: error => {
-        console.log('ChatSdk onError', error)
-      }
-    })
-  }
+  const sdk = new ChatSdk({
+    brandId: options.brandId,
+    channelId: options.channelId,
+    customerId: window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY) || '',
+    environment: options.environment
+  })
 
+  const root = createRoot(container)
   let availability
   let playSound
-
   try {
     const result = await checkAvailability(options.availabilityEndpoint)
-
     playSound = await messageNotification(options.audioUrl)
     availability = result.availability
   } catch (e) {
     availability = 'UNAVAILABLE'
   }
-
   root.render(
-    <AppProvider availability={availability}>
+    <AppProvider sdk={sdk} availability={availability} playSound={playSound}>
       <Availability />
-      <SkipLink />
-      <Panel initSdk={initSdk} playSound={playSound} />
     </AppProvider>
   )
 }

package/src/client/store/{app/AppProvider.jsx → AppProvider.jsx}

@@ -1,14 +1,84 @@
 import React, { createContext, useEffect, useReducer, useMemo } from 'react'
-// import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
+import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
 
 import { initialState, reducer } from './reducer.js'
-import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from '../constants.js'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from './constants.js'
 
 export const AppContext = createContext(initialState)
 
-export const AppProvider = ({ availability, children }) => {
+export const AppProvider = ({ sdk, availability, playSound, children }) => {
   const [state, dispatch] = useReducer(reducer, initialState)
 
+  /**
+   * SDK event handlers
+   */
+  const onLiveChatRecovered = e => {
+    dispatch({ type: 'SET_AGENT', payload: e.detail.data.inboxAssignee })
+    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.contact.status })
+    dispatch({ type: 'SET_UNSEEN_COUNT', payload: e.detail.data.contact.customerStatistics.unseenMessagesCount })
+  }
+
+  const onAssignedAgentChanged = e => {
+    dispatch({ type: 'SET_AGENT', payload: e.detail.data.inboxAssignee })
+    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
+  }
+
+  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 => {
+    dispatch({ type: 'SET_MESSAGE', payload: e.detail.data.message })
+    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
+    dispatch({ type: 'SET_UNSEEN_COUNT', payload: e.detail.data.case.customerStatistics.unseenMessagesCount })
+
+    const isAudioOn = JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)).audio
+
+    if (isAudioOn && e.detail.data.message.direction === 'outbound' && playSound) {
+      playSound()
+    }
+  }
+
+  const onContactStatusChanged = e => {
+    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
+  }
+
+  const onMatchMedia = e => {
+    dispatch({ type: 'TOGGLE_IS_MOBILE', payload: e.matches })
+  }
+
+  const onKeydown = () => {
+    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: true })
+  }
+
+  const onPointerdown = () => {
+    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: false })
+  }
+
+  useEffect(() => {
+    sdk.onChatEvent(ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered)
+    sdk.onChatEvent(ChatEvent.MESSAGE_CREATED, onMessageCreated)
+    sdk.onChatEvent(ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted)
+    sdk.onChatEvent(ChatEvent.AGENT_TYPING_ENDED, onAgentTypingEnded)
+    sdk.onChatEvent(ChatEvent.ASSIGNED_AGENT_CHANGED, onAssignedAgentChanged)
+    sdk.onChatEvent(ChatEvent.CONTACT_STATUS_CHANGED, onContactStatusChanged)
+    // We need to know if it is a mobile and if it is a keyboard interaction
+    window.matchMedia('(max-width: 640px)').addEventListener('change', onMatchMedia)
+    window.addEventListener('keydown', onKeydown)
+    window.addEventListener('pointerdown', onPointerdown)
+    // Tidying up
+    return () => {
+      window.removeEventListener('change', onMatchMedia)
+      window.removeEventListener('keydown', onKeydown)
+      window.removeEventListener('pointerdown', onPointerdown)
+    }
+  }, [sdk])
+
   /**
    * Initialize customerId, threadId and whether the webchat should be open
    */
@@ -44,38 +114,9 @@ export const AppProvider = ({ availability, children }) => {
     }
   }, [])
 
-  const onMatchMedia = e => {
-    dispatch({ type: 'TOGGLE_IS_MOBILE', payload: e.matches })
-  }
-
-  const onKeydown = () => {
-    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: true })
-  }
-
-  const onPointerdown = () => {
-    dispatch({ type: 'TOGGLE_IS_KEYBOARD', payload: false })
-  }
-
-  useEffect(() => {
-    // We need to know if it is a mobile and if it is a keyboard interaction
-    window.matchMedia('(max-width: 640px)').addEventListener('change', onMatchMedia)
-    window.addEventListener('keydown', onKeydown)
-    window.addEventListener('pointerdown', onPointerdown)
-
-    return () => {
-      window.removeEventListener('change', onMatchMedia)
-      window.removeEventListener('keydown', onKeydown)
-      window.removeEventListener('pointerdown', onPointerdown)
-    }
-  }, [])
-
   /**
    * State update functions
    */
-  const setSdk = payload => {
-    dispatch({ type: 'SET_SDK', payload })
-  }
-
   const setChatVisibility = payload => {
     dispatch({ type: 'SET_CHAT_VISIBILITY', payload })
   }
@@ -92,6 +133,10 @@ export const AppProvider = ({ availability, children }) => {
     dispatch({ type: 'SET_THREAD', payload: thread })
   }
 
+  const setMessages = messages => {
+    dispatch({ type: 'SET_MESSAGES', payload: messages })
+  }
+
   const setSettings = data => {
     dispatch({ type: 'SET_SETTINGS', payload: data })
   }
@@ -113,15 +158,22 @@ export const AppProvider = ({ availability, children }) => {
    */
   const store = useMemo(() => ({
     ...state,
-    setSdk,
+    sdk,
     setSettings,
     setCustomerId,
     setThreadId,
     setThread,
+    setMessages,
     setUnseenCount,
     setChatVisibility,
     setInstigatorId,
-    setLiveRegionText
+    setLiveRegionText,
+    onLiveChatRecovered,
+    onAssignedAgentChanged,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
   }))
 
   return (

package/src/client/store/{app/actions-map.js → actions-map.js}

@@ -1,11 +1,5 @@
-import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from '../constants'
-
-const setSdk = (state, payload) => {
-  return {
-    ...state,
-    sdk: payload
-  }
-}
+import { transformMessages, transformMessage } from '../lib/transform-messages'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY, MESSAGES_UNSEEN_COUNT } from './constants'
 
 const setSettings = (state, payload) => {
   if (payload) {
@@ -46,6 +40,20 @@ const setThreadId = (state, payload) => {
   }
 }
 
+const setChatVisibility = (state, payload) => {
+  return {
+    ...state,
+    isChatOpen: payload
+  }
+}
+
+const setAvailability = (state, payload) => {
+  return {
+    ...state,
+    availability: payload
+  }
+}
+
 const setThread = (state, payload) => {
   return {
     ...state,
@@ -53,17 +61,39 @@ const setThread = (state, payload) => {
   }
 }
 
-const setChatVisibility = (state, payload) => {
+const setMessages = (state, payload) => {
   return {
     ...state,
-    isChatOpen: payload
+    messages: transformMessages(payload).reverse()
   }
 }
 
-const setAvailability = (state, payload) => {
+const setMessage = (state, payload) => {
   return {
     ...state,
-    availability: payload
+    message: transformMessage(payload),
+    messages: [...state.messages, transformMessage(payload)]
+  }
+}
+
+const setAgent = (state, payload) => {
+  return {
+    ...state,
+    agent: payload
+  }
+}
+
+const setAgentIsTyping = (state, payload) => {
+  return {
+    ...state,
+    isAgentTyping: payload
+  }
+}
+
+const setAgentStatus = (state, payload) => {
+  return {
+    ...state,
+    agentStatus: payload
   }
 }
 
@@ -104,13 +134,17 @@ const toggleIsKeyboard = (state, payload) => {
 }
 
 export const actionsMap = {
-  SET_SDK: setSdk,
-  SET_THREAD: setThread,
   SET_CHAT_VISIBILITY: setChatVisibility,
   SET_AVAILABILITY: setAvailability,
   SET_SETTINGS: setSettings,
   SET_CUSTOMER_ID: setCustomerId,
   SET_THREAD_ID: setThreadId,
+  SET_THREAD: setThread,
+  SET_MESSAGE: setMessage,
+  SET_MESSAGES: setMessages,
+  SET_AGENT: setAgent,
+  SET_AGENT_TYPING: setAgentIsTyping,
+  SET_AGENT_STATUS: setAgentStatus,
   SET_UNSEEN_COUNT: setUnseenCount,
   SET_INSTIGATOR_ID: setInstigatorId,
   SET_LIVE_REGION_TEXT: setLiveRegionText,

package/src/client/store/{app/reducer.js → reducer.js}

@@ -1,13 +1,16 @@
 import { actionsMap } from './actions-map'
 
 export const initialState = {
-  sdk: null,
   availability: null,
   customerId: null,
   threadId: null,
   thread: null,
+  messages: [],
   unseenCount: 0,
   instigatorId: null,
+  agent: null,
+  agentStatus: null,
+  isAgentTyping: false,
   isChatOpen: false,
   isMobile: window.matchMedia('(max-width: 640px)').matches,
   isKeyboard: false,

package/src/client/store/useChatSdk.js

@@ -0,0 +1,37 @@
+export const useChatSdk = sdk => {
+  const connect = async () => sdk.authorize()
+
+  const fetchCustomerId = async () => {
+    const response = await connect()
+    return response?.consumerIdentity.idOnExternalPlatform
+  }
+
+  const fetchThread = async threadId => {
+    await connect()
+    return sdk.getThread(threadId)
+  }
+
+  const fetchMessages = async (thread, threadId) => {
+    await connect()
+
+    const recovered = await thread.recover(threadId)
+
+    const allMessages = []
+    let fetchedMessages = recovered.messages
+
+    while (fetchedMessages.length) {
+      fetchedMessages.map(msg => allMessages.push(msg))
+
+      try {
+        const response = await thread.loadMoreMessages()
+        fetchedMessages = response.data.messages
+      } catch (err) {
+        fetchedMessages = []
+      }
+    }
+
+    return allMessages
+  }
+
+  return { connect, fetchCustomerId, fetchThread, fetchMessages }
+}

package/src/client/store/sdk/SdkProvider.jsx

@@ -1,141 +0,0 @@
-import React, { createContext, useEffect, useReducer, useMemo } from 'react'
-import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
-
-import { initialState, reducer } from './reducer.js'
-import { SETTINGS_STORAGE_KEY } from '../constants.js'
-import { useApp } from '../app/useApp.js'
-
-export const SdkContext = createContext(initialState)
-
-export const SdkProvider = ({ sdk, playSound, onRecoverError, children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState)
-  const { thread, threadId, setThread, setThreadId, setUnseenCount } = useApp()
-
-  /**
-   * SDK event handlers
-   */
-  const onLiveChatRecovered = e => {
-    dispatch({ type: 'SET_AGENT', payload: e.detail.data.inboxAssignee })
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.contact.status })
-    setUnseenCount(e.detail.data.contact.customerStatistics.unseenMessagesCount)
-  }
-
-  const onAssignedAgentChanged = e => {
-    dispatch({ type: 'SET_AGENT', payload: e.detail.data.inboxAssignee })
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-  }
-
-  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 => {
-    dispatch({ type: 'SET_MESSAGE', payload: e.detail.data.message })
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-
-    setUnseenCount(e.detail.data.case.customerStatistics.unseenMessagesCount)
-
-    const isAudioOn = JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)).audio
-
-    if (isAudioOn && e.detail.data.message.direction === 'outbound' && playSound) {
-      playSound()
-    }
-  }
-
-  const onContactStatusChanged = e => {
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-  }
-
-  useEffect(() => {
-    if (sdk) {
-      sdk.onChatEvent(ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered)
-      sdk.onChatEvent(ChatEvent.MESSAGE_CREATED, onMessageCreated)
-      sdk.onChatEvent(ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted)
-      sdk.onChatEvent(ChatEvent.AGENT_TYPING_ENDED, onAgentTypingEnded)
-      sdk.onChatEvent(ChatEvent.ASSIGNED_AGENT_CHANGED, onAssignedAgentChanged)
-      sdk.onChatEvent(ChatEvent.CONTACT_STATUS_CHANGED, onContactStatusChanged)
-    }
-  }, [sdk])
-
-  const fetchMessages = async threadItem => {
-    const recovered = await threadItem.recover()
-
-    const allMessages = []
-
-    let fetchedMessages = recovered.messages
-
-    while (fetchedMessages.length) {
-      fetchedMessages.map(msg => allMessages.push(msg))
-
-      try {
-        const response = await threadItem.loadMoreMessages()
-        fetchedMessages = response.data.messages
-      } catch (err) {
-        fetchedMessages = []
-      }
-    }
-
-    return allMessages
-  }
-
-  /**
-   * Recovers the thread if there is a threadId but no thread loaded in to state
-   */
-  useEffect(() => {
-    const recover = async () => {
-      try {
-        await sdk.authorize()
-
-        const fetchedThread = await sdk.getThread(threadId)
-        const fetchedMessages = await fetchMessages(fetchedThread)
-
-        setThread(fetchedThread)
-        setMessages(fetchedMessages)
-      } catch (err) {
-        console.log('[Chat Error] fetchThread', err)
-        setThreadId()
-        setThread()
-        onRecoverError()
-      }
-    }
-
-    if (sdk && threadId && !thread) {
-      console.log('recovering chat...')
-      recover()
-    }
-  }, [sdk, thread, threadId])
-
-  /**
-   * State update functions
-   */
-  const setMessages = messages => {
-    dispatch({ type: 'SET_MESSAGES', payload: messages })
-  }
-
-  /**
-   * Application-wide state and state functions
-   */
-  const store = useMemo(() => ({
-    ...state,
-    sdk,
-    fetchMessages,
-    setMessages,
-    onLiveChatRecovered,
-    onAssignedAgentChanged,
-    onAgentTypingStarted,
-    onAgentTypingEnded,
-    onMessageCreated,
-    onContactStatusChanged
-  }))
-
-  return (
-    <SdkContext.Provider value={store}>
-      {children}
-    </SdkContext.Provider>
-  )
-}

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

@@ -1,45 +0,0 @@
-import { transformMessages, transformMessage } from '../../lib/transform-messages'
-
-const setMessages = (state, payload) => {
-  return {
-    ...state,
-    messages: transformMessages(payload).reverse()
-  }
-}
-
-const setMessage = (state, payload) => {
-  return {
-    ...state,
-    message: transformMessage(payload),
-    messages: [...state.messages, transformMessage(payload)]
-  }
-}
-
-const setAgent = (state, payload) => {
-  return {
-    ...state,
-    agent: payload
-  }
-}
-
-const setAgentIsTyping = (state, payload) => {
-  return {
-    ...state,
-    isAgentTyping: payload
-  }
-}
-
-const setAgentStatus = (state, payload) => {
-  return {
-    ...state,
-    agentStatus: payload
-  }
-}
-
-export const actionsMap = {
-  SET_MESSAGE: setMessage,
-  SET_MESSAGES: setMessages,
-  SET_AGENT: setAgent,
-  SET_AGENT_TYPING: setAgentIsTyping,
-  SET_AGENT_STATUS: setAgentStatus
-}

package/src/client/store/sdk/reducer.js

@@ -1,21 +0,0 @@
-import { actionsMap } from './actions-map'
-
-export const initialState = {
-  messages: [],
-  agent: null,
-  agentStatus: null,
-  isAgentTyping: false
-}
-
-export const reducer = (state, action) => {
-  const { type, payload } = action
-
-  const fn = actionsMap[type]
-
-  if (fn) {
-    const actionFunction = fn.bind(this, state, payload)
-    return actionFunction()
-  }
-
-  return state
-}

package/src/client/store/sdk/useSdk.js

@@ -1,5 +0,0 @@
-import { useContext } from 'react'
-
-import { SdkContext } from './SdkProvider.jsx'
-
-export const useSdk = () => useContext(SdkContext)