@defra/flood-webchat 0.0.1-alpha.9 → 0.0.1-beta.10

package/src/client/store/AppProvider.jsx

@@ -0,0 +1,114 @@
+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'
+
+export const AppContext = createContext(initialState)
+
+export const AppProvider = ({ sdk, availability, 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 })
+  }
+
+  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 => {
+    setMessage(e.detail.data.message)
+    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
+  }
+
+  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))
+
+    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 setMessage = message => {
+    dispatch({ type: 'SET_MESSAGE', payload: message })
+  }
+
+  const setMessages = messages => {
+    dispatch({ type: 'SET_MESSAGES', payload: messages })
+  }
+
+  /**
+   * Application-wide state and state functions
+   */
+  const store = useMemo(() => ({
+    ...state,
+    sdk,
+    setCustomerId,
+    setThreadId,
+    setThread,
+    setMessage,
+    setMessages,
+    setChatVisibility
+  }))
+
+  return (
+    <AppContext.Provider value={store}>
+      {children}
+    </AppContext.Provider>
+  )
+}

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

@@ -0,0 +1,97 @@
+import { transformMessages, transformMessage } from '../lib/transform-messages'
+import { CUSTOMER_ID_STORAGE_KEY, THREAD_ID_STORAGE_KEY } from './reducer'
+
+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
+  }
+}
+
+export const actionsMap = {
+  SET_CHAT_VISIBILITY: setChatVisibility,
+  SET_AVAILABILITY: setAvailability,
+  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
+}

package/src/client/store/reducer.js

@@ -0,0 +1,29 @@
+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: [],
+  agent: null,
+  agentStatus: null,
+  isAgentTyping: false,
+  isChatOpen: 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/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 @@
-import { authenticate, getHost, getIsOpen, getActivity } from './client.js'
+const { authenticate, getApiBaseUrl, getIsOpen, getActivity } = require('./lib/client.js')
 
 /**
  * Returns webchat availability
@@ -9,35 +9,49 @@ import { authenticate, getHost, getIsOpen, getActivity } from './client.js'
  * @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)}>}
  */
-export default async function getAvailability ({
+module.exports = async function getAvailability ({
   clientId,
   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 host = await getHost({ tenantId })
+  const { tenantId, token, tokenType } = await authenticate({
+    authenticationUri,
+    authorisation,
+    accessKey,
+    accessSecret
+  })
+
+  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 })
   ])
 
-  // Hours of operation
-
-  // Availability
   const isAvailable = isOpen && hasAgentsAvailable && hasCapacity
   const isExistingOnly = isOpen && hasAgentsAvailable && !hasCapacity
-  const availability = isAvailable ? 'AVAILABLE' : isExistingOnly ? 'EXISTING' : 'UNAVAILABLE'
+
+  let availability = 'UNAVAILABLE'
+
+  if (isAvailable) {
+    availability = 'AVAILABLE'
+  } else if (isExistingOnly) {
+    availability = 'EXISTING'
+  }
 
   return {
     date: new Date(),

package/src/server/lib/client.js

@@ -0,0 +1,88 @@
+const querystring = require('querystring')
+const axios = require('axios')
+const jwtdecode = require('jwt-decode')
+const { isWithinHours } = require('./utils.js')
+
+const contentType = 'application/x-www-form-urlencoded'
+
+const authenticate = async ({ authenticationUri, authorisation, accessKey, accessSecret }) => {
+  const url = new URL(authenticationUri)
+  const body = querystring.stringify({
+    grant_type: 'password',
+    username: accessKey,
+    password: accessSecret
+  })
+
+  const auth = await axios.post(url.href, body, {
+    signal: AbortSignal.timeout(3000),
+    headers: {
+      Host: url.host,
+      'Content-Type': contentType,
+      Authorization: authorisation
+    }
+  })
+
+  return {
+    token: auth.data.access_token,
+    tokenType: auth.data.token_type,
+    tenantId: jwtdecode(auth.data.id_token)?.tenantId
+  }
+}
+
+const getApiBaseUrl = async ({ wellKnownUri, tenantId }) => {
+  const url = new URL(wellKnownUri)
+  url.searchParams.set('tenantId', tenantId)
+
+  const { data } = await axios.get(url.href, {
+    headers: {
+      Host: url.host
+    },
+    signal: AbortSignal.timeout(3000)
+  })
+
+  return data.api_endpoint
+}
+
+const getActivity = async ({ tokenType, token, baseUrl, skillEndpoint, maxQueueCount }) => {
+  const url = new URL(skillEndpoint, baseUrl)
+
+  const skill = await axios.get(url.href, {
+    signal: AbortSignal.timeout(3000),
+    headers: {
+      Host: url.host,
+      Authorization: `${tokenType} ${token}`,
+      'Content-Type': contentType
+    }
+  })
+
+  const activity = skill.data.skillActivity[0]
+
+  return {
+    hasCapacity: activity.queueCount < maxQueueCount,
+    hasAgentsAvailable: activity.agentsAvailable >= 1
+  }
+}
+
+const getIsOpen = async ({ baseUrl, token, tokenType, hoursEndpoint }) => {
+  const url = new URL(hoursEndpoint, baseUrl)
+
+  const hours = await axios.get(url.href, {
+    signal: AbortSignal.timeout(3000),
+    headers: {
+      Host: url.host,
+      Authorization: `${tokenType} ${token}`,
+      'Content-Type': contentType
+    }
+  })
+
+  const days = hours.data.resultSet.hoursOfOperationProfiles[0].days
+
+  return isWithinHours(days)
+}
+
+module.exports = {
+  authenticate,
+  getApiBaseUrl,
+  getIsOpen,
+  getActivity
+}

package/src/server/lib/utils.js

@@ -0,0 +1,23 @@
+const { DateTime } = require('luxon')
+
+const getHour = time => Number(time.split(':')[0])
+
+const isWithinHours = (days, date) => {
+  const now = date ? DateTime.fromISO(date) : DateTime.local()
+  now.setZone('Europe/London')
+
+  const newDate = date ? new Date(date) : new Date()
+
+  const today = newDate.toLocaleDateString('en-GB', { weekday: 'long' })
+  const dateParts = newDate.toLocaleDateString('en-GB').split('/')
+
+  const todaysAvailability = days.find(item => item.day === today)
+  const todaysDateTimeOpen = DateTime.local(Number(dateParts[2]), Number(dateParts[1]), Number(dateParts[0]), getHour(todaysAvailability.openTime))
+  const todaysDateTimeClose = DateTime.local(Number(dateParts[2]), Number(dateParts[1]), Number(dateParts[0]), getHour(todaysAvailability.closeTime))
+
+  return now.diff(todaysDateTimeOpen).milliseconds >= 0 && now.diff(todaysDateTimeClose).milliseconds <= 0
+}
+
+module.exports = {
+  isWithinHours
+}

package/webpack.config.mjs

@@ -0,0 +1,32 @@
+import path from 'path'
+
+import nodeExternals from 'webpack-node-externals'
+
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+
+export default {
+  entry: {
+    client: path.join(__dirname, 'src/client/index.jsx'),
+    server: path.join(__dirname, 'src/server/index.js')
+  },
+  devtool: 'source-map',
+  mode: 'development',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    library: {
+      type: 'commonjs2'
+    }
+  },
+  target: 'node',
+  externals: [nodeExternals()],
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/i,
+        use: [
+          'babel-loader'
+        ]
+      }
+    ]
+  }
+}

package/babel.config.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  presets: [['@babel/preset-env', { targets: { node: 'current' } }]]
-}