@defra/flood-webchat 0.0.1-beta.17 → 0.0.1-beta.19

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 
-export function PreChat ({ onForward }) {
+export function PreChat ({ onContinue }) {
   return (
     <>
       <PanelHeader />
@@ -21,19 +21,29 @@ export function PreChat ({ onForward }) {
           {
             'There are other ways to '
           }
-          <a className='govuk-link' href='https://www.gov.uk/sign-up-for-flood-warnings'>
+          <a className='govuk-link' href='https://www.gov.uk/sign-up-for-flood-warnings' target='_blank' rel='noreferrer'>
             sign up for flood warnings
           </a>
           {
             ' and '
           }
-          <a className='govuk-link' href='https://www.fws.environment-agency.gov.uk/app/olr/login'>
+          <a className='govuk-link' href='https://www.fws.environment-agency.gov.uk/app/olr/login' target='_blank' rel='noreferrer'>
             manage your flood warnings account
           </a>.
         </p>
-        <p className='govuk-body-s'>Do not use webchat to <a className='govuk-link' href='https://www.gov.uk/report-flood-cause'>report a flood</a>.</p>
+        <p className='govuk-body-s'>
+          {'Do not use webchat to '}
+          <a
+            className='govuk-link'
+            href='https://www.gov.uk/report-flood-cause'
+            target='_blank'
+            rel='noreferrer'
+          >
+            report a flood
+          </a>.
+        </p>
 
-        <button className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onForward}>Continue</button>
+        <button className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onContinue}>Continue</button>
 
         <h3 className='govuk-heading-s'>Other flood information</h3>
 
@@ -47,7 +57,7 @@ export function PreChat ({ onForward }) {
           <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>
+          <a className='govuk-link' href='https://gov.uk/call-charges' target='_blank' rel='noreferrer'>Find out more about call charges</a>
         </p>
       </div>
     </>

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

@@ -9,7 +9,7 @@ import { ErrorSummary } from '../errorSummary/error-summary.jsx'
 
 const QUESTION_MAX_LENGTH = 500
 
-export function RequestChat ({ onBack }) {
+export function RequestChat ({ onPreChatScreen }) {
   const { sdk, setCustomerId, setThreadId, setThread } = useApp()
   const { fetchCustomerId, fetchThread } = useChatSdk(sdk)
 
@@ -82,7 +82,7 @@ export function RequestChat ({ onBack }) {
       <PanelHeader />
 
       <div className='wc-body'>
-        <a href='#' className='wc-back-link govuk-back-link' onClick={onBack}>
+        <a href='#' className='wc-back-link govuk-back-link' onClick={onPreChatScreen}>
           What you can use webchat for
         </a>
 

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

@@ -1,11 +1,10 @@
 import * as uuid from 'uuid'
-import sanitizeHtml from 'sanitize-html'
 import { DateTime } from 'luxon'
 
 export const transformMessage = message => {
   return {
     id: message.id,
-    text: sanitizeHtml(message.messageContent?.text),
+    text: message.messageContent?.text,
     createdAt: new Date(message.createdAt),
     user: message.authorEndUserIdentity?.fullName?.trim() || null,
     assignee: message.authorUser?.firstName || null,

package/src/client/store/AppProvider.jsx

@@ -1,13 +1,18 @@
 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
    */
@@ -34,6 +39,12 @@ export const AppProvider = ({ sdk, availability, children }) => {
     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 => {
@@ -57,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)
@@ -90,6 +102,10 @@ 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 })
   }
@@ -100,6 +116,7 @@ export const AppProvider = ({ sdk, availability, children }) => {
   const store = useMemo(() => ({
     ...state,
     sdk,
+    setSettings,
     setCustomerId,
     setThreadId,
     setThread,

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) {
@@ -93,6 +106,7 @@ const setUnseenCount = (state, 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,

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,8 +1,5 @@
 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,
@@ -13,7 +10,8 @@ export const initialState = {
   agent: null,
   agentStatus: null,
   isAgentTyping: false,
-  isChatOpen: false
+  isChatOpen: false,
+  settings: { audio: true, scroll: true }
 }
 
 export const reducer = (state, action) => {