@defra/flood-webchat 0.0.1-beta.16 → 0.0.1-beta.18

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

@@ -6,13 +6,14 @@ import { RequestChat } from '../screens/request-chat.jsx'
 import { Chat } from '../chat/chat.jsx'
 import { Unavailable } from '../screens/unavailable.jsx'
 import { EndChat } from '../screens/end-chat.jsx'
+import { Settings } from '../screens/settings.jsx'
 
 import { useApp } from '../../store/useApp.js'
 import { useChatSdk } from '../../store/useChatSdk.js'
 import { useFocusedElements } from '../../hooks/useFocusedElements.js'
 
 export function Panel () {
-  const { sdk, availability, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages } = useApp()
+  const { sdk, availability, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages, setUnseenCount } = useApp()
   const { fetchThread, fetchMessages } = useChatSdk(sdk)
 
   const [screen, setScreen] = useState(threadId ? 2 : 0)
@@ -51,7 +52,13 @@ export function Panel () {
     }
 
     if (threadId) {
-      (thread) ? setScreen(2) : recover()
+      if (thread) {
+        thread.lastMessageSeen()
+        setUnseenCount(0)
+        setScreen(2)
+      } else {
+        recover()
+      }
     }
   }, [thread, threadId])
 
@@ -70,6 +77,7 @@ export function Panel () {
   const onBack = handleScreenChange(screen - 1)
   const onEndChat = handleScreenChange(3)
   const onResume = handleScreenChange(2)
+  const onSettings = handleScreenChange(5)
 
   const onEndChatConfirm = e => {
     e.preventDefault()
@@ -86,11 +94,14 @@ export function Panel () {
       ScreenComponent = <RequestChat onBack={onBack} />
       break
     case 2:
-      ScreenComponent = <Chat setScreen={setScreen} onEndChat={onEndChat} />
+      ScreenComponent = <Chat onSettings={onSettings} onEndChat={onEndChat} />
       break
     case 3:
       ScreenComponent = <EndChat onResume={onResume} onEndChatConfirm={onEndChatConfirm} />
       break
+    case 5:
+      ScreenComponent = <Settings onCancel={onResume} />
+      break
     default:
       ScreenComponent = <PreChat onForward={onForward} />
   }
@@ -100,7 +111,7 @@ export function Panel () {
   }
 
   const Component = (
-    <div id='wc-panel' className='wc-panel' role='dialog' tabIndex='-1' aria-modal='true' aria-labelledby='wc-header-title'>
+    <div id='wc-panel' role='dialog' className='wc-panel' tabIndex='-1' aria-modal='true' aria-labelledby='wc-header-title'>
       {ScreenComponent}
     </div>
   )

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

@@ -0,0 +1,67 @@
+import React, { useState } from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+import { useApp } from '../../store/useApp.js'
+
+export function Settings ({ onCancel }) {
+  const { settings, setSettings } = useApp()
+
+  const [optionAudio, setOptionAudio] = useState(settings.audio)
+  const [optionScroll, setOptionScroll] = useState(settings.scroll)
+
+  const onSave = e => {
+    e.preventDefault()
+
+    setSettings({ audio: optionAudio, scroll: optionScroll })
+    onCancel(e)
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <fieldset className='govuk-fieldset govuk-!-margin-bottom-4'>
+          <legend className='govuk-fieldset__legend govuk-fieldset__legend'>
+            <h3 id='wc-subtitle' className='govuk-heading-s'>Change settings</h3>
+          </legend>
+          <div className='govuk-checkboxes govuk-checkboxes--small' data-module='govuk-checkboxes'>
+            <div className='govuk-checkboxes__item'>
+              <input
+                id='audio'
+                name='audio'
+                type='checkbox'
+                value='audio'
+                className='govuk-checkboxes__input'
+                defaultChecked={optionAudio}
+                onChange={() => setOptionAudio(!optionAudio)}
+              />
+              <label className='govuk-label govuk-checkboxes__label govuk-!-font-size-16' htmlFor='audio'>
+                Play a sound when receiving a new message
+              </label>
+            </div>
+            <div className='govuk-checkboxes__item'>
+              <input
+                id='scroll'
+                name='scroll'
+                type='checkbox'
+                value='scroll'
+                className='govuk-checkboxes__input'
+                defaultChecked={optionScroll}
+                onChange={() => setOptionScroll(!optionScroll)}
+              />
+              <label className='govuk-label govuk-checkboxes__label govuk-!-font-size-16' htmlFor='scroll'>
+                Scroll automatically to a new message
+              </label>
+            </div>
+          </div>
+        </fieldset>
+
+        <div className='govuk-button-group'>
+          <a id='settings-save' href='#' className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onSave}>Save</a>
+          <a id='settings-cancel' href='#' className='govuk-link govuk-!-font-size-16' data-module='govuk-button' onClick={onCancel}>Cancel</a>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/client/index.jsx

@@ -4,7 +4,7 @@ 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/AppProvider.jsx'
-import { CUSTOMER_ID_STORAGE_KEY } from './store/reducer.js'
+import { CUSTOMER_ID_STORAGE_KEY } from './store/constants.js'
 
 export async function init (container, options) {
   const sdk = new ChatSdk({
@@ -23,8 +23,8 @@ export async function init (container, options) {
     availability = 'UNAVAILABLE'
   }
   root.render(
-    <AppProvider sdk={sdk} availability={availability}>
-      <Availability availability={availability} />
+    <AppProvider sdk={sdk} availability={availability} options={options}>
+      <Availability />
     </AppProvider>
   )
 }

package/src/client/lib/message-notification.js

@@ -0,0 +1,36 @@
+export const messageNotification = audioUrl => {
+  let buffer
+
+  const context = new (window.AudioContext || window.webkitAudioContext)()
+
+  if (context.state === 'suspended') {
+    const events = ['touchstart', 'touchend', 'mousedown', 'wheel', 'keydown', 'click']
+
+    const unlock = _e => {
+      events.forEach(event => {
+        document.body.removeEventListener(event, unlock)
+      })
+
+      context.resume()
+    }
+
+    events.forEach(event => {
+      document.body.addEventListener(event, unlock, false)
+    })
+  }
+
+  fetch(audioUrl)
+    .then(response => response.arrayBuffer())
+    .then(data => context.decodeAudioData(data))
+    .then(decodedData => {
+      buffer = decodedData
+    })
+    .catch(console.error)
+
+  return () => {
+    const source = context.createBufferSource()
+    source.buffer = buffer
+    source.connect(context.destination)
+    source.start()
+  }
+}

package/src/client/store/AppProvider.jsx

@@ -1,19 +1,25 @@
 import React, { createContext, useEffect, useReducer, useMemo } from 'react'
 import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
 
-import { initialState, reducer, CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY } from './reducer.js'
+import { messageNotification } from '../lib/message-notification.js'
+
+import { initialState, reducer } from './reducer.js'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY } from './constants.js'
 
 export const AppContext = createContext(initialState)
 
-export const AppProvider = ({ sdk, availability, children }) => {
+export const AppProvider = ({ sdk, availability, options, children }) => {
   const [state, dispatch] = useReducer(reducer, initialState)
 
+  const playSound = messageNotification(options.audioUrl)
+
   /**
    * 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 => {
@@ -32,6 +38,13 @@ export const AppProvider = ({ sdk, availability, children }) => {
   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()
+    }
   }
 
   const onContactStatusChanged = e => {
@@ -55,6 +68,7 @@ export const AppProvider = ({ sdk, availability, children }) => {
 
     setCustomerId(window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY))
     setThreadId(window.localStorage.getItem(THREAD_ID_STORAGE_KEY))
+    setSettings(JSON.parse(window.localStorage.getItem(SETTINGS_STORAGE_KEY)) || state.settings)
 
     if (window.location.hash === '#webchat') {
       setChatVisibility(true)
@@ -88,16 +102,26 @@ export const AppProvider = ({ sdk, availability, children }) => {
     dispatch({ type: 'SET_MESSAGES', payload: messages })
   }
 
+  const setSettings = data => {
+    dispatch({ type: 'SET_SETTINGS', payload: data })
+  }
+
+  const setUnseenCount = unseenCount => {
+    dispatch({ type: 'SET_UNSEEN_COUNT', payload: unseenCount })
+  }
+
   /**
    * Application-wide state and state functions
    */
   const store = useMemo(() => ({
     ...state,
     sdk,
+    setSettings,
     setCustomerId,
     setThreadId,
     setThread,
     setMessages,
+    setUnseenCount,
     setChatVisibility,
     onLiveChatRecovered,
     onAssignedAgentChanged,

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

@@ -1,5 +1,18 @@
 import { transformMessages, transformMessage } from '../lib/transform-messages'
-import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY } from './reducer'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY, SETTINGS_STORAGE_KEY } from './constants'
+
+const setSettings = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(SETTINGS_STORAGE_KEY, JSON.stringify(payload))
+  } else {
+    window.localStorage.removeItem(SETTINGS_STORAGE_KEY)
+  }
+
+  return {
+    ...state,
+    settings: payload
+  }
+}
 
 const setCustomerId = (state, payload) => {
   if (payload) {
@@ -83,9 +96,17 @@ const setAgentStatus = (state, payload) => {
   }
 }
 
+const setUnseenCount = (state, payload) => {
+  return {
+    ...state,
+    unseenCount: payload
+  }
+}
+
 export const actionsMap = {
   SET_CHAT_VISIBILITY: setChatVisibility,
   SET_AVAILABILITY: setAvailability,
+  SET_SETTINGS: setSettings,
   SET_CUSTOMER_ID: setCustomerId,
   SET_THREAD_ID: setThreadId,
   SET_THREAD: setThread,
@@ -93,5 +114,6 @@ export const actionsMap = {
   SET_MESSAGES: setMessages,
   SET_AGENT: setAgent,
   SET_AGENT_TYPING: setAgentIsTyping,
-  SET_AGENT_STATUS: setAgentStatus
+  SET_AGENT_STATUS: setAgentStatus,
+  SET_UNSEEN_COUNT: setUnseenCount
 }

package/src/client/store/constants.js

@@ -0,0 +1,3 @@
+export const SETTINGS_STORAGE_KEY = 'webchat_settings'
+export const CUSTOMER_ID_STORAGE_KEY = 'webchat_customer_id'
+export const THREAD_ID_STORAGE_KEY = 'webchat_thread_id'

package/src/client/store/reducer.js

@@ -1,18 +1,17 @@
 import { actionsMap } from './actions-map'
 
-export const CUSTOMER_ID_STORAGE_KEY = 'webchat_customer_id'
-export const THREAD_ID_STORAGE_KEY = 'webchat_thread_id'
-
 export const initialState = {
   availability: null,
   customerId: null,
   threadId: null,
   thread: null,
   messages: [],
+  unseenCount: 0,
   agent: null,
   agentStatus: null,
   isAgentTyping: false,
-  isChatOpen: false
+  isChatOpen: false,
+  settings: { audio: true, scroll: true }
 }
 
 export const reducer = (state, action) => {