@defra/flood-webchat 0.0.1-beta.2 → 0.0.1-beta.21

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/components/screens/unavailable.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function Unavailable () {
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <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/hooks/useFocusedElements.js

@@ -0,0 +1,71 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const setAriaHidden = bool => {
+  for (const node of document.body.children) {
+    if (node.id !== 'wc-panel') {
+      (bool) ? node.setAttribute('aria-hidden', 'true') : node.removeAttribute('aria-hidden')
+    }
+  }
+}
+
+export const getFocusableElements = () => {
+  const selectors = [
+    '#wc-panel a:not([disabled])',
+    '#wc-panel button:not([disabled])',
+    '#wc-panel select:not([disabled])',
+    '#wc-panel input:not([disabled])',
+    '#wc-panel textarea:not([disabled])',
+    '#wc-panel *[tabindex="0"]:not([disabled])'
+  ]
+
+  const elements = document.body.querySelectorAll(selectors.join(','))
+  return Array.from(elements).filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
+}
+
+const useFocusedElements = screen => {
+  const [panelElements, setPanelElements] = useState([])
+
+  const onKeyDown = useCallback(e => {
+    const webchatPanelElement = document.querySelector('#wc-panel')
+
+    if (e.key === 'Tab') {
+      if (webchatPanelElement && !document.activeElement.closest('#wc-panel')) {
+        webchatPanelElement.focus()
+      }
+
+      if (e.shiftKey) {
+        if (document.activeElement === panelElements[0]) {
+          panelElements[panelElements.length - 1].focus()
+          e.preventDefault()
+        } else if (document.activeElement === document.querySelector('#wc-panel')) {
+          panelElements[panelElements.length - 1]?.focus()
+          e.preventDefault()
+        }
+      } else if (document.activeElement === panelElements[panelElements.length - 1]) {
+        panelElements[0].focus()
+        e.preventDefault()
+      }
+    }
+  }, [panelElements])
+
+  useEffect(() => {
+    setPanelElements(getFocusableElements())
+  }, [screen])
+
+  useEffect(() => {
+    setAriaHidden(true)
+
+    const panelElement = document.querySelector('#wc-panel')
+    panelElement.focus()
+
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      setAriaHidden()
+      document.body.querySelector('.wc-availability__link')?.focus()
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [panelElements])
+}
+
+export { useFocusedElements }

package/src/client/hooks/useTextareaAutosize.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+
+export const useTextareaAutosize = (textAreaRef, value) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = '0px'
+
+      const scrollHeight = textAreaRef.scrollHeight
+
+      textAreaRef.style.height = `${scrollHeight}px`
+    }
+  }, [textAreaRef, value])
+}

package/src/client/index.jsx

@@ -1,9 +1,19 @@
 import React from 'react'
 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/AppProvider.jsx'
+import { CUSTOMER_ID_STORAGE_KEY } from './store/constants.js'
 
 export async function init (container, options) {
+  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
   try {
@@ -12,5 +22,9 @@ export async function init (container, options) {
   } catch (e) {
     availability = 'UNAVAILABLE'
   }
-  root.render(<Availability availability={availability} />)
+  root.render(
+    <AppProvider sdk={sdk} availability={availability} options={options}>
+      <Availability />
+    </AppProvider>
+  )
 }

package/src/client/lib/check-availability.js

@@ -1,6 +1,7 @@
 export async function checkAvailability (endpoint) {
   const response = await fetch(endpoint)
   const data = await response.json()
+
   return {
     availability: data.availability || 'UNAVAILABLE'
   }

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/lib/transform-messages.js

@@ -0,0 +1,35 @@
+import * as uuid from 'uuid'
+import { DateTime } from 'luxon'
+
+export const transformMessage = message => {
+  return {
+    id: message.id,
+    text: message.messageContent?.text,
+    createdAt: new Date(message.createdAt),
+    user: message.authorEndUserIdentity?.fullName?.trim() || null,
+    assignee: message.authorUser?.firstName || null,
+    direction: message.direction
+  }
+}
+
+export const transformMessages = messages => messages.map(message => transformMessage(message))
+
+export const formatTranscript = messages => {
+  const now = DateTime.local()
+  now.setZone('Europe/London')
+
+  let string = `Floodline webchat transcript, ${now.toFormat('HH:mm:ss a, dd LLLL yyyy')}, (ID: ${uuid.v4().split('-')[0]})\n\n`
+
+  for (const message of messages) {
+    const { text, direction, user, assignee, createdAt } = message
+
+    const author = direction === 'inbound' ? user : `${assignee} (Floodline adviser)`
+    const date = DateTime.fromJSDate(new Date(createdAt)).setZone('Europe/London').toFormat('HH:mm:ss a, dd LLLL yyyy')
+
+    string += `[${date}] ${author}: \n${text}\n\n`
+  }
+
+  string = string.replace(/<a\b[^>]*>/i, '').replace(/<\/a>/i, '')
+
+  return encodeURIComponent(string)
+}

package/src/client/store/AppProvider.jsx

@@ -0,0 +1,139 @@
+import React, { createContext, useEffect, useReducer, useMemo } from 'react'
+import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
+
+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, 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 => {
+    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 })
+  }
+
+  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 => {
+    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
+  }
+
+  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)
+  }, [sdk])
+
+  /**
+   * Initialize customerId, threadId and whether the webchat should be open
+   */
+  useEffect(() => {
+    dispatch({ type: 'SET_AVAILABILITY', payload: availability })
+
+    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)
+    }
+  }, [])
+
+  /**
+   * State update functions
+   */
+  const setChatVisibility = payload => {
+    if (!payload) {
+      window.location.hash = ''
+    }
+
+    dispatch({ type: 'SET_CHAT_VISIBILITY', payload })
+  }
+
+  const setCustomerId = customerId => {
+    dispatch({ type: 'SET_CUSTOMER_ID', payload: customerId })
+  }
+
+  const setThreadId = threadId => {
+    dispatch({ type: 'SET_THREAD_ID', payload: threadId })
+  }
+
+  const setThread = thread => {
+    dispatch({ type: 'SET_THREAD', payload: thread })
+  }
+
+  const setMessages = messages => {
+    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,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
+  }))
+
+  return (
+    <AppContext.Provider value={store}>
+      {children}
+    </AppContext.Provider>
+  )
+}

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

@@ -0,0 +1,119 @@
+import { transformMessages, transformMessage } from '../lib/transform-messages'
+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) {
+    window.localStorage.setItem(CUSTOMER_ID_STORAGE_KEY, payload)
+  } else {
+    window.localStorage.removeItem(CUSTOMER_ID_STORAGE_KEY)
+  }
+
+  return {
+    ...state,
+    customerId: payload
+  }
+}
+
+const setThreadId = (state, payload) => {
+  if (payload) {
+    window.localStorage.setItem(THREAD_ID_STORAGE_KEY, payload)
+  } else {
+    window.localStorage.removeItem(THREAD_ID_STORAGE_KEY)
+  }
+
+  return {
+    ...state,
+    threadId: payload
+  }
+}
+
+const setChatVisibility = (state, payload) => {
+  return {
+    ...state,
+    isChatOpen: payload
+  }
+}
+
+const setAvailability = (state, payload) => {
+  return {
+    ...state,
+    availability: payload
+  }
+}
+
+const setThread = (state, payload) => {
+  return {
+    ...state,
+    thread: payload
+  }
+}
+
+const setMessage = (state, payload) => {
+  return {
+    ...state,
+    messages: [...state.messages, transformMessage(payload)]
+  }
+}
+
+const setMessages = (state, payload) => {
+  return {
+    ...state,
+    messages: transformMessages(payload).reverse()
+  }
+}
+
+const setAgent = (state, payload) => {
+  return {
+    ...state,
+    agent: payload
+  }
+}
+
+const setAgentIsTyping = (state, payload) => {
+  return {
+    ...state,
+    isAgentTyping: payload
+  }
+}
+
+const setAgentStatus = (state, payload) => {
+  return {
+    ...state,
+    agentStatus: 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,
+  SET_MESSAGE: setMessage,
+  SET_MESSAGES: setMessages,
+  SET_AGENT: setAgent,
+  SET_AGENT_TYPING: setAgentIsTyping,
+  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

@@ -0,0 +1,28 @@
+import { actionsMap } from './actions-map'
+
+export const initialState = {
+  availability: null,
+  customerId: null,
+  threadId: null,
+  thread: null,
+  messages: [],
+  unseenCount: 0,
+  agent: null,
+  agentStatus: null,
+  isAgentTyping: false,
+  isChatOpen: false,
+  settings: { audio: true, scroll: true }
+}
+
+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/useApp.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react'
+
+import { AppContext } from './AppProvider.jsx'
+
+export const useApp = () => useContext(AppContext)

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/server/index.js

@@ -1,4 +1,4 @@
-const { authenticate, getHost, getIsOpen, getActivity } = require('./lib/client.js')
+const { authenticate, getApiBaseUrl, getIsOpen, getActivity } = require('./lib/client.js')
 
 /**
  * Returns webchat availability
@@ -9,6 +9,8 @@ const { authenticate, getHost, getIsOpen, getActivity } = require('./lib/client.
  * @param options.accessSecret {string}
  * @param options.skillEndpoint {string}
  * @param options.hoursEndpoint {string}
+ * @param options.authenticationUri {string}
+ * @param options.wellKnownUri {string}
  * @param options.maxQueueCount {string}
  * @returns {Promise<{date: Date, availability: (string)}>}
  */
@@ -17,20 +19,27 @@ module.exports = async function getAvailability ({
   clientSecret,
   accessKey,
   accessSecret,
+  maxQueueCount,
   skillEndpoint,
   hoursEndpoint,
-  maxQueueCount
+  wellKnownUri = 'https://cxone.niceincontact.com/.well-known/cxone-configuration',
+  authenticationUri = 'https://cxone.niceincontact.com/auth/token'
 }) {
   const authorisation = 'Basic ' + Buffer.from(`${encodeURIComponent(clientId)}:${encodeURIComponent(clientSecret)}`).toString('base64')
 
   // Cache authentication and re-authenticate when needed (lasts 1 hour?)
-  const { tenantId, token, tokenType } = await authenticate({ authorisation, accessKey, accessSecret })
+  const { tenantId, token, tokenType } = await authenticate({
+    authenticationUri,
+    authorisation,
+    accessKey,
+    accessSecret
+  })
 
-  const host = await getHost({ tenantId })
+  const apiBaseUrl = await getApiBaseUrl({ wellKnownUri, tenantId })
 
   const [{ hasCapacity, hasAgentsAvailable }, isOpen] = await Promise.all([
-    getActivity({ tokenType, token, host, skillEndpoint, maxQueueCount }),
-    getIsOpen({ token, tokenType, host, hoursEndpoint })
+    getActivity({ baseUrl: apiBaseUrl, tokenType, token, skillEndpoint, maxQueueCount }),
+    getIsOpen({ baseUrl: apiBaseUrl, token, tokenType, hoursEndpoint })
   ])
 
   const isAvailable = isOpen && hasAgentsAvailable && hasCapacity