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

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

package/src/server/lib/client.js

@@ -5,26 +5,23 @@ const { isWithinHours } = require('./utils.js')
 
 const contentType = 'application/x-www-form-urlencoded'
 
-const authenticate = async ({ authorisation, accessKey, accessSecret }) => {
-  const uri = 'https://cxone.niceincontact.com/auth/token'
+const authenticate = async ({ authenticationUri, authorisation, accessKey, accessSecret }) => {
+  const url = new URL(authenticationUri)
+  const body = querystring.stringify({
+    grant_type: 'password',
+    username: accessKey,
+    password: accessSecret
+  })
 
-  const config = {
+  const auth = await axios.post(url.href, body, {
     signal: AbortSignal.timeout(3000),
     headers: {
-      Host: 'eu1.niceincontact.com',
+      Host: url.host,
       'Content-Type': contentType,
       Authorization: authorisation
     }
-  }
-
-  const body = querystring.stringify({
-    grant_type: 'password',
-    username: accessKey,
-    password: accessSecret
   })
 
-  const auth = await axios.post(uri, body, config)
-
   return {
     token: auth.data.access_token,
     tokenType: auth.data.token_type,
@@ -32,30 +29,31 @@ const authenticate = async ({ authorisation, accessKey, accessSecret }) => {
   }
 }
 
-const getHost = async ({ tenantId }) => {
-  const uri = `https://cxone.niceincontact.com/.well-known/cxone-configuration?tenantId=${tenantId}`
+const getApiBaseUrl = async ({ wellKnownUri, tenantId }) => {
+  const url = new URL(wellKnownUri)
+  url.searchParams.set('tenantId', tenantId)
 
-  const config = {
+  const { data } = await axios.get(url.href, {
+    headers: {
+      Host: url.host
+    },
     signal: AbortSignal.timeout(3000)
-  }
-
-  const api = await axios.get(uri, config)
+  })
 
-  return `api-${api.data.area}.niceincontact.com`
+  return data.api_endpoint
 }
 
-const getActivity = async ({ tokenType, token, host, skillEndpoint, maxQueueCount }) => {
-  const config = {
+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: host,
+      Host: url.host,
       Authorization: `${tokenType} ${token}`,
       'Content-Type': contentType
     }
-  }
-  const uri = `https://${host}${skillEndpoint}`
-
-  const skill = await axios.get(uri, config)
+  })
 
   const activity = skill.data.skillActivity[0]
 
@@ -65,19 +63,17 @@ const getActivity = async ({ tokenType, token, host, skillEndpoint, maxQueueCoun
   }
 }
 
-const getIsOpen = async ({ host, token, tokenType, hoursEndpoint }) => {
-  const config = {
+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: 'api-l36.niceincontact.com',
+      Host: url.host,
       Authorization: `${tokenType} ${token}`,
       'Content-Type': contentType
     }
-  }
-
-  const uri = `https://${host}${hoursEndpoint}`
-
-  const hours = await axios.get(uri, config)
+  })
 
   const days = hours.data.resultSet.hoursOfOperationProfiles[0].days
 
@@ -86,7 +82,7 @@ const getIsOpen = async ({ host, token, tokenType, hoursEndpoint }) => {
 
 module.exports = {
   authenticate,
-  getHost,
+  getApiBaseUrl,
   getIsOpen,
   getActivity
 }

package/src/server/lib/utils.js

@@ -1,12 +1,21 @@
-const isWithinHours = days => {
-  const now = new Date()
-  const name = now.toLocaleDateString('en-GB', { weekday: 'long' })
-  const day = days.find(d => d.day.toLowerCase() === name.toLowerCase())
-  const date = now.toLocaleDateString('en-GB').split('/')
-  const open = `${date[2]}-${date[1]}-${date[0]}T${day.openTime}.000Z`
-  const close = `${date[2]}-${date[1]}-${date[0]}T${day.closeTime}.000Z`
-
-  return now.getTime() >= Date.parse(open) && now.getTime() <= Date.parse(close)
+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 = {

package/src/client/lib/external-stores.js

@@ -1,4 +0,0 @@
-import ExternalSyncStore from './external-sync-store'
-
-export const useWebchatOpenState = ExternalSyncStore.create(false)
-export const useMessageThread = ExternalSyncStore.create([])

package/src/client/lib/external-sync-store.js

@@ -1,42 +0,0 @@
-import { useSyncExternalStore } from 'react'
-
-export default class ExternalSyncStore {
-  constructor (initialValue) {
-    this._value = initialValue
-    this._listeners = []
-  }
-
-  update (value) {
-    this._value = value
-    this.emitChange()
-  }
-
-  subscribe (listener) {
-    this._listeners = [...this._listeners, listener]
-    return () => {
-      this._listeners = this._listeners.filter(l => l !== listener)
-    }
-  }
-
-  emitChange () {
-    for (const listener of this._listeners) {
-      listener()
-    }
-  }
-
-  getSnapshot () {
-    return this._value
-  }
-
-  static create (initialValue) {
-    const store = new ExternalSyncStore(initialValue)
-    const boundSubscribe = store.subscribe.bind(store)
-    const boundGetSnapshot = store.getSnapshot.bind(store)
-    const boundUpdate = store.update.bind(store)
-
-    return () => [
-      useSyncExternalStore(boundSubscribe, boundGetSnapshot),
-      boundUpdate
-    ]
-  }
-}