@defra/flood-webchat 0.0.1-beta.4 → 0.0.1-beta.41

package/src/client/scss/_settings.scss

@@ -0,0 +1,101 @@
+.wc-heading {
+    @extend %govuk-heading-m;
+    font-size: 19px;
+    margin-bottom: 15px;
+}
+
+.wc-list {
+    @extend %govuk-list;
+    @extend %govuk-list--bullet;
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-body p {
+    font-size: 16px;
+    line-height: 1.25;
+    margin-bottom: 15px;
+    @extend %govuk-body-s;
+}
+
+.wc-body .govuk-error-message {
+    color: govuk-colour('red');
+    font-weight: 700;
+}
+
+.wc-link,
+.wc-button,
+.govuk-button-group .wc-button,
+.govuk-button-group .wc-link {
+    font-size: 16px;
+}
+
+.wc-button[aria-disabled="true"] {
+    cursor: not-allowed;
+    opacity: 0.5;
+}
+
+.wc-label {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-form-group {
+    margin-bottom: 15px;
+}
+
+.wc-hint {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-inset-text {
+    margin: 0 0 20px;
+    padding: 5px 5px 5px 15px;
+    font-size: 16px;
+    border-left-width: 5px;
+}
+
+.wc-error-summary__title {
+    font-size: 19px;
+    line-height: 1.25;
+    margin-bottom: 15px;
+}
+
+.wc-error-summary__list,
+.wc-error-message {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-input, .wc-textarea {
+    font-size: 16px;
+    line-height: 1.25;
+}
+
+.wc-back-link {
+    font-size: 16px;
+    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/scss/_tools.scss

@@ -0,0 +1,33 @@
+// Check there is ot already similar functinality in GOV.UK Frontend
+
+@mixin defra-visually-hidden() {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    border: 0;
+    white-space: nowrap;
+}
+
+// Map specific mixins
+@mixin focus($glow: 8px, $strong: 5px, $background: 2px, $inset: 0) {
+    position:absolute;
+    content:'';
+    left: 5px;
+    right: 5px;
+    top: 5px;
+    bottom: 5px;
+    box-shadow:
+        0 0 0 $background #ffffff,
+        inset 0 0 0 $inset govuk-colour('black'),
+        0 0 0 $strong govuk-colour('black'),
+        0 0 0 $glow $govuk-focus-colour;
+    outline: 3px solid transparent;
+    pointer-events: none;
+    z-index: 99;
+}

package/src/client/scss/_utilities.scss

@@ -0,0 +1,25 @@
+.wc-u-html {
+    @include mq ($until: tablet) {
+        height: 100vh;
+        overflow: hidden;
+    }
+}
+
+.wc-u-body {
+    @include mq ($until: tablet) {
+        position: fixed;
+        overflow: hidden;
+        top:0;
+        right:0;
+        bottom:0;
+        left:0;
+    }
+}
+
+.wc-u-hidden {
+    visibility: hidden;
+}
+
+.wc-u-scroll-padding {
+    scroll-padding-bottom: calc(2rem + 20px);
+}

package/src/client/store/AppProvider.jsx

@@ -0,0 +1,187 @@
+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 })
+    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()
+    }
+  }
+
+  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
+   */
+  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)
+  }, [])
+
+  /**
+   * Set browser history on start chat click
+   */
+  useEffect(() => {
+    if (window.location.hash === '#webchat') {
+      setChatVisibility(true)
+    }
+
+    const onBrowserNavigation = () => {
+      if (window.location.hash === '#webchat') {
+        setChatVisibility(true)
+      } else {
+        setChatVisibility(false)
+      }
+    }
+
+    window.addEventListener('popstate', onBrowserNavigation)
+
+    return () => {
+      window.removeEventListener('popstate', onBrowserNavigation)
+    }
+  }, [])
+
+  /**
+   * State update functions
+   */
+  const setChatVisibility = payload => {
+    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 })
+  }
+
+  const setInstigatorId = id => {
+    dispatch({ type: 'SET_INSTIGATOR_ID', payload: id })
+  }
+
+  const setLiveRegionText = text => {
+    dispatch({ type: 'SET_LIVE_REGION_TEXT', payload: text })
+  }
+
+  /**
+   * Application-wide state and state functions
+   */
+  const store = useMemo(() => ({
+    ...state,
+    sdk,
+    setSettings,
+    setCustomerId,
+    setThreadId,
+    setThread,
+    setMessages,
+    setUnseenCount,
+    setChatVisibility,
+    setInstigatorId,
+    setLiveRegionText,
+    onLiveChatRecovered,
+    onAssignedAgentChanged,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
+  }))
+
+  return (
+    <AppContext.Provider value={store}>
+      {children}
+    </AppContext.Provider>
+  )
+}

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

@@ -0,0 +1,152 @@
+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 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
+  }
+}
+
+const setUnseenCount = (state, payload) => {
+  return {
+    ...state,
+    unseenCount: payload
+  }
+}
+
+const setInstigatorId = (state, payload) => {
+  return {
+    ...state,
+    instigatorId: payload
+  }
+}
+
+const setLiveRegionText = (state, payload) => {
+  return {
+    ...state,
+    liveRegionText: payload
+  }
+}
+
+const toggleIsMobile = (state, payload) => {
+  return {
+    ...state,
+    isMobile: payload
+  }
+}
+
+const toggleIsKeyboard = (state, payload) => {
+  return {
+    ...state,
+    isKeyboard: 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,
+  SET_INSTIGATOR_ID: setInstigatorId,
+  SET_LIVE_REGION_TEXT: setLiveRegionText,
+  TOGGLE_IS_MOBILE: toggleIsMobile,
+  TOGGLE_IS_KEYBOARD: toggleIsKeyboard
+}

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,31 @@
+import { actionsMap } from './actions-map'
+
+export const initialState = {
+  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,
+  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