@defra/flood-webchat 1.0.10 → 1.0.12

package/src/client/store/{app/reducer.js → reducer.js}

@@ -1,13 +1,16 @@
 import { actionsMap } from './actions-map'
 
 export const initialState = {
-  sdk: null,
   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,

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

@@ -1,6 +1,6 @@
 const querystring = require('querystring')
 const axios = require('axios')
-const jwtdecode = require('jwt-decode')
+const { jwtDecode } = require('jwt-decode')
 const { isWithinHours } = require('./utils.js')
 
 const contentType = 'application/x-www-form-urlencoded'
@@ -25,7 +25,7 @@ const authenticate = async ({ authenticationUri, authorisation, accessKey, acces
   return {
     token: auth.data.access_token,
     tokenType: auth.data.token_type,
-    tenantId: jwtdecode(auth.data.id_token)?.tenantId
+    tenantId: jwtDecode(auth.data.id_token)?.tenantId
   }
 }
 

package/src/server/lib/utils.js

@@ -18,12 +18,6 @@ const isWithinHours = (days, date) => {
   return now.diff(todaysDateTimeOpen).milliseconds >= 0 && now.diff(todaysDateTimeClose).milliseconds <= 0
 }
 
-const stripPageTitle = title => {
-  const prefixPattern = /^\(\d+ new messages?\) - /
-  return title.replace(prefixPattern, '')
-}
-
 module.exports = {
-  isWithinHours,
-  stripPageTitle
+  isWithinHours
 }

package/src/client/store/sdk/SdkProvider.jsx

@@ -1,141 +0,0 @@
-import React, { createContext, useEffect, useReducer, useMemo } from 'react'
-import { ChatEvent } from '@nice-devone/nice-cxone-chat-web-sdk'
-
-import { initialState, reducer } from './reducer.js'
-import { SETTINGS_STORAGE_KEY } from '../constants.js'
-import { useApp } from '../app/useApp.js'
-
-export const SdkContext = createContext(initialState)
-
-export const SdkProvider = ({ sdk, playSound, onRecoverError, children }) => {
-  const [state, dispatch] = useReducer(reducer, initialState)
-  const { thread, threadId, setThread, setThreadId, setUnseenCount } = useApp()
-
-  /**
-   * 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 })
-    setUnseenCount(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 })
-
-    setUnseenCount(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) {
-      playSound()
-    }
-  }
-
-  const onContactStatusChanged = e => {
-    dispatch({ type: 'SET_AGENT_STATUS', payload: e.detail.data.case.status })
-  }
-
-  useEffect(() => {
-    if (sdk) {
-      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])
-
-  const fetchMessages = async threadItem => {
-    const recovered = await threadItem.recover()
-
-    const allMessages = []
-
-    let fetchedMessages = recovered.messages
-
-    while (fetchedMessages.length) {
-      fetchedMessages.map(msg => allMessages.push(msg))
-
-      try {
-        const response = await threadItem.loadMoreMessages()
-        fetchedMessages = response.data.messages
-      } catch (err) {
-        fetchedMessages = []
-      }
-    }
-
-    return allMessages
-  }
-
-  /**
-   * Recovers the thread if there is a threadId but no thread loaded in to state
-   */
-  useEffect(() => {
-    const recover = async () => {
-      try {
-        await sdk.authorize()
-
-        const fetchedThread = await sdk.getThread(threadId)
-        const fetchedMessages = await fetchMessages(fetchedThread)
-
-        setThread(fetchedThread)
-        setMessages(fetchedMessages)
-      } catch (err) {
-        console.log('[Chat Error] fetchThread', err)
-        setThreadId()
-        setThread()
-        onRecoverError()
-      }
-    }
-
-    if (sdk && threadId && !thread) {
-      console.log('recovering chat...')
-      recover()
-    }
-  }, [sdk, thread, threadId])
-
-  /**
-   * State update functions
-   */
-  const setMessages = messages => {
-    dispatch({ type: 'SET_MESSAGES', payload: messages })
-  }
-
-  /**
-   * Application-wide state and state functions
-   */
-  const store = useMemo(() => ({
-    ...state,
-    sdk,
-    fetchMessages,
-    setMessages,
-    onLiveChatRecovered,
-    onAssignedAgentChanged,
-    onAgentTypingStarted,
-    onAgentTypingEnded,
-    onMessageCreated,
-    onContactStatusChanged
-  }))
-
-  return (
-    <SdkContext.Provider value={store}>
-      {children}
-    </SdkContext.Provider>
-  )
-}

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

@@ -1,45 +0,0 @@
-import { transformMessages, transformMessage } from '../../lib/transform-messages'
-
-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
-  }
-}
-
-export const actionsMap = {
-  SET_MESSAGE: setMessage,
-  SET_MESSAGES: setMessages,
-  SET_AGENT: setAgent,
-  SET_AGENT_TYPING: setAgentIsTyping,
-  SET_AGENT_STATUS: setAgentStatus
-}

package/src/client/store/sdk/reducer.js

@@ -1,21 +0,0 @@
-import { actionsMap } from './actions-map'
-
-export const initialState = {
-  messages: [],
-  agent: null,
-  agentStatus: null,
-  isAgentTyping: 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/sdk/useSdk.js

@@ -1,5 +0,0 @@
-import { useContext } from 'react'
-
-import { SdkContext } from './SdkProvider.jsx'
-
-export const useSdk = () => useContext(SdkContext)