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

package/src/client/components/skip-link.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import { createPortal } from 'react-dom'
+import { useApp } from '../store/useApp'
+
+export const SkipLink = () => {
+  const { threadId, setInstigatorId } = useApp()
+
+  if (!threadId) {
+    return null
+  }
+
+  const targetContainer = document.getElementById('skip-links')
+
+  if (!targetContainer) {
+    return null
+  }
+
+  const onClick = e => {
+    e.preventDefault()
+    setInstigatorId(e.target.id)
+    window.location.hash = '#webchat'
+  }
+
+  return (
+    <>
+      {createPortal(
+        <a
+          id='webchat-skip-link'
+          href='#webchat'
+          className='govuk-skip-link'
+          data-module='govuk-skip-link'
+          onClick={onClick}
+          data-wc-skiplink
+          data-wc-open-btn
+        >
+          Skip to webchat
+        </a>,
+        targetContainer
+      )}
+    </>
+  )
+}

package/src/client/hooks/useFocusedElements.js

@@ -0,0 +1,80 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const ariaHidden = 'aria-hidden'
+const dataWcInert = 'data-wc-inert'
+
+const setAriaHidden = isInert => {
+  for (const node of document.body.children) {
+    if (node.id !== 'wc-panel') {
+      // We only want to toggle elements that aren't already inert
+      if (isInert && !node.getAttribute(ariaHidden)) {
+        node.setAttribute(ariaHidden, 'true')
+        node.setAttribute(dataWcInert, '')
+      } else if (node.hasAttribute(dataWcInert)) {
+        node.removeAttribute(ariaHidden)
+        node.removeAttribute(dataWcInert)
+      }
+    }
+  }
+}
+
+export const getFocusableElements = () => {
+  const selectors = [
+    '#wc-panel a:not([disabled])',
+    '#wc-panel button:not([disabled])',
+    '#wc-panel select:not([disabled])',
+    '#wc-panel input:not([disabled])',
+    '#wc-panel textarea:not([disabled])',
+    '#wc-panel *[tabindex="0"]:not([disabled])'
+  ]
+
+  const elements = document.body.querySelectorAll(selectors.join(','))
+  return Array.from(elements).filter(e => !e.closest('[hidden]') && !e.closest('[aria-hidden="true"]'))
+}
+
+const useFocusedElements = screen => {
+  const [panelElements, setPanelElements] = useState([])
+
+  const onKeyDown = useCallback(e => {
+    const webchatPanelElement = document.querySelector('#wc-panel')
+
+    if (e.key === 'Tab') {
+      if (webchatPanelElement && !document.activeElement.closest('#wc-panel')) {
+        webchatPanelElement.focus()
+      }
+
+      if (e.shiftKey) {
+        if (document.activeElement === panelElements[0]) {
+          panelElements[panelElements.length - 1].focus()
+          e.preventDefault()
+        } else if (document.activeElement === document.querySelector('#wc-panel')) {
+          panelElements[panelElements.length - 1]?.focus()
+          e.preventDefault()
+        }
+      } else if (document.activeElement === panelElements[panelElements.length - 1]) {
+        panelElements[0].focus()
+        e.preventDefault()
+      }
+    }
+  }, [panelElements])
+
+  useEffect(() => {
+    setPanelElements(getFocusableElements())
+  }, [screen])
+
+  useEffect(() => {
+    setAriaHidden(true)
+
+    const panelElement = document.querySelector('#wc-panel')
+    panelElement.focus()
+
+    document.addEventListener('keydown', onKeyDown)
+
+    return () => {
+      setAriaHidden()
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [panelElements])
+}
+
+export { useFocusedElements }

package/src/client/hooks/useTextareaAutosize.js

@@ -0,0 +1,13 @@
+import { useEffect } from 'react'
+
+export const useTextareaAutosize = (textAreaRef, value) => {
+  useEffect(() => {
+    if (textAreaRef) {
+      textAreaRef.style.height = '0px'
+
+      const scrollHeight = textAreaRef.scrollHeight
+
+      textAreaRef.style.height = `${scrollHeight}px`
+    }
+  }, [textAreaRef, value])
+}

package/src/client/index.jsx

@@ -1,9 +1,19 @@
 import React from 'react'
 import { createRoot } from 'react-dom/client'
+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/constants.js'
 
 export async function init (container, options) {
+  const sdk = new ChatSdk({
+    brandId: options.brandId,
+    channelId: options.channelId,
+    customerId: window.localStorage.getItem(CUSTOMER_ID_STORAGE_KEY) || '',
+    environment: options.environment
+  })
+
   const root = createRoot(container)
   let availability
   try {
@@ -12,5 +22,9 @@ export async function init (container, options) {
   } catch (e) {
     availability = 'UNAVAILABLE'
   }
-  root.render(<Availability availability={availability} />)
+  root.render(
+    <AppProvider sdk={sdk} availability={availability} options={options}>
+      <Availability />
+    </AppProvider>
+  )
 }

package/src/client/lib/agent-status-headline.js

@@ -0,0 +1,17 @@
+export const agentStatusHeadline = (availability, agentStatus, agentName) => {
+  if (availability === 'UNAVAILABLE') {
+    return 'Webchat is not currently available'
+  }
+
+  if (!agentStatus) {
+    return 'Connecting to Floodline'
+  }
+
+  switch (agentStatus) {
+    case 'closed':
+    case 'resolved':
+      return agentName ? `${agentName} ended the session` : 'Session ended by advisor'
+    default:
+      return agentName ? `You are speaking with ${agentName}` : 'No advisers currently available'
+  }
+}

package/src/client/lib/check-availability.js

@@ -1,6 +1,7 @@
 export async function checkAvailability (endpoint) {
   const response = await fetch(endpoint)
   const data = await response.json()
+
   return {
     availability: data.availability || 'UNAVAILABLE'
   }

package/src/client/lib/history.js

@@ -0,0 +1,13 @@
+export const historyPushState = () => {
+  const url = window.location.href.split('#')[0]
+  window.history.pushState({ history: true }, null, `${url}#webchat`)
+}
+
+export const historyReplaceState = () => {
+  if (window.history.state?.history) {
+    return window.history.back()
+  }
+
+  const url = window.location.href.split('#')[0]
+  return window.history.replaceState(null, null, url)
+}

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

@@ -0,0 +1,34 @@
+import { DateTime } from 'luxon'
+
+export const transformMessage = message => {
+  return {
+    id: message.id,
+    text: message.messageContent?.text,
+    createdAt: new Date(message.createdAt),
+    user: message.authorEndUserIdentity?.fullName?.trim() || null,
+    assignee: message.authorUser?.firstName || null,
+    direction: message.direction
+  }
+}
+
+export const transformMessages = messages => messages.map(message => transformMessage(message))
+
+export const formatTranscript = messages => {
+  const now = DateTime.local()
+  now.setZone('Europe/London')
+
+  let string = `Floodline webchat transcript, ${now.toFormat('HH:mm:ss a, dd LLLL yyyy')}\n\n`
+
+  for (const message of messages) {
+    const { text, direction, user, assignee, createdAt } = message
+
+    const author = direction === 'inbound' ? user : `${assignee} (Floodline adviser)`
+    const date = DateTime.fromJSDate(new Date(createdAt)).setZone('Europe/London').toFormat('HH:mm:ss a, dd LLLL yyyy')
+
+    string += `[${date}] ${author}: \n${text}\n\n`
+  }
+
+  string = string.replace(/<a\b[^>]*>/i, '').replace(/<\/a>/i, '')
+
+  return encodeURIComponent(string)
+}

package/src/client/scss/_objects.scss

@@ -0,0 +1,33 @@
+%wc-link-button {
+    @extend %govuk-link;
+    position: relative;
+    display: inline-block;
+    font-size: 16px;
+    color: govuk-colour('black');
+
+    &:hover {
+        color: govuk-colour('black');
+    }
+
+    &:visited:not(:hover):not(:focus) {
+        color: govuk-colour('black');
+    }
+
+    &:active {
+        color: govuk-colour('black');
+    }
+
+    &:focus {
+        box-shadow: none;
+        background-color: transparent;
+        text-decoration: underline;
+        color: govuk-colour('black');
+    }
+
+    &:focus-visible {
+        background-color: $govuk-focus-colour;
+        box-shadow: 0 -2px $govuk-focus-colour, 0 4px govuk-colour('black');
+        text-decoration: none;
+        color: govuk-colour('black');
+    }
+}

package/src/client/scss/_settings.scss

@@ -0,0 +1,80 @@
+.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;
+}

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,179 @@
+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 })
+  }
+
+  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 = window.addEventListener('popstate', () => {
+      if (window.location.hash === '#webchat') {
+        setChatVisibility(true)
+      } else {
+        setChatVisibility(false)
+      }
+    })
+
+    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 })
+  }
+
+  /**
+   * Application-wide state and state functions
+   */
+  const store = useMemo(() => ({
+    ...state,
+    sdk,
+    setSettings,
+    setCustomerId,
+    setThreadId,
+    setThread,
+    setMessages,
+    setUnseenCount,
+    setChatVisibility,
+    setInstigatorId,
+    onLiveChatRecovered,
+    onAssignedAgentChanged,
+    onAgentTypingStarted,
+    onAgentTypingEnded,
+    onMessageCreated,
+    onContactStatusChanged
+  }))
+
+  return (
+    <AppContext.Provider value={store}>
+      {children}
+    </AppContext.Provider>
+  )
+}