@defra/flood-webchat 0.0.1-beta.53 → 0.0.1-beta.54

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/flood-webchat",
-  "version": "0.0.1-beta.53",
+  "version": "0.0.1-beta.54",
   "description": "",
   "main": "dist/server.js",
   "browser": "dist/client.js",

package/src/client/components/availability/availability.jsx

@@ -1,130 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-
-import { classnames } from '../../lib/classnames'
-import { Panel } from '../panel/panel.jsx'
-import { SkipLink } from '../skip-link.jsx'
-
-import { useApp } from '../../store/useApp'
-import { historyPushState, historyReplaceState } from '../../lib/history.js'
-import { LiveRegion } from '../live-region.jsx'
-
-export function Availability () {
-  const { availability, isChatOpen, setChatVisibility, unseenCount, threadId, setUnseenCount, setInstigatorId, setLiveRegionText } = useApp()
-
-  const buttonRef = useRef()
-
-  const showUnseenCount = unseenCount > 0 && !isChatOpen
-
-  const messageText = unseenCount > 1 ? 'new messages' : 'new message'
-
-  const onClick = e => {
-    e.preventDefault()
-    setUnseenCount(0)
-    setChatVisibility(!isChatOpen)
-    setInstigatorId(e.target.id)
-
-    if (!isChatOpen) {
-      historyPushState()
-    } else {
-      historyReplaceState()
-    }
-  }
-
-  const onKeyDown = event => {
-    if (event.key === ' ') {
-      event.preventDefault()
-    }
-  }
-
-  const onKeyUp = event => {
-    if (event.key === ' ') {
-      setUnseenCount(0)
-      setChatVisibility(!isChatOpen)
-    }
-  }
-
-  useEffect(() => {
-    if (showUnseenCount) {
-      setLiveRegionText(`Floodline webchat - ${unseenCount} ${messageText}`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [unseenCount, isChatOpen])
-
-  useEffect(() => {
-    const onScroll = () => {
-      if (!threadId) {
-        return
-      }
-
-      if (availability !== 'AVAILABLE') {
-        return
-      }
-
-      const rect = buttonRef.current.parentElement.getBoundingClientRect()
-
-      const isBelowFold = rect.top + 35 > (window.innerHeight || document.documentElement.clientHeight)
-      const isFixed = !isChatOpen && isBelowFold
-
-      document.documentElement.classList.toggle('wc-u-scroll-padding', isFixed)
-      document.body.classList.toggle('wc-u-scroll-padding', isFixed)
-      buttonRef.current.classList.toggle('wc-availability--fixed', isFixed)
-    }
-
-    document.addEventListener('scroll', onScroll)
-    onScroll()
-
-    return () => {
-      document.removeEventListener('scroll', onScroll)
-    }
-  }, [threadId, isChatOpen, availability])
-
-  switch (availability) {
-    case 'AVAILABLE':
-      return (
-        <>
-          <div
-            className={classnames('wc-availability', isChatOpen && 'wc-open')}
-            ref={buttonRef}
-          >
-            <div className='wc-availability__inner'>
-              <a
-                id='webchat-start-chat-link'
-                className='wc-availability__link'
-                href='#webchat'
-                draggable='false'
-                onClick={onClick}
-                onKeyUp={onKeyUp}
-                onKeyDown={onKeyDown}
-                role='button'
-                data-module='govuk-button'
-              >
-                {!threadId ? <>Start chat</> : <>Show chat</>}
-                {showUnseenCount
-                  ? (
-                    <span className='wc-availability__unseen'>
-                      {unseenCount}
-                      <span className='govuk-visually-hidden'> {messageText}</span>
-                    </span>
-                    )
-                  : null}
-              </a>
-            </div>
-          </div>
-          {!isChatOpen ? <LiveRegion /> : <Panel />}
-          <SkipLink />
-        </>
-      )
-    case 'EXISTING':
-    case 'UNAVAILABLE':
-      return (
-        <p className='govuk-body'>When it is available, a 'start chat' link will appear.</p>
-      )
-    default:
-      return (
-        <p className='govuk-body'>Checking availability</p>
-      )
-  }
-}

package/src/client/components/chat/chat.jsx

@@ -1,233 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-
-import { PanelHeader } from '../panel/panel-header.jsx'
-import { PanelFooter } from '../panel/panel-footer.jsx'
-import { Message } from '../message/message.jsx'
-
-import { useApp } from '../../store/useApp.js'
-import { useTextareaAutosize } from '../../hooks/useTextareaAutosize.js'
-import { formatTranscript } from '../../lib/transform-messages.js'
-import { agentStatusHeadline } from '../../lib/agent-status-headline.js'
-
-export function Chat ({ onEndChatScreen, onSettingsScreen }) {
-  const { availability, thread, messages, agent, agentStatus, isAgentTyping, isChatOpen, settings, isKeyboard, setLiveRegionText } = useApp()
-
-  const [userMessage, setUserMessage] = useState('')
-  const [focusVisibleWithin, setFocusVisibleWithin] = useState(false)
-
-  const messageRef = useRef()
-
-  useTextareaAutosize(messageRef.current, userMessage)
-
-  useEffect(() => {
-    if (settings.scroll && messages.length !== 0) {
-      const chatBody = document.querySelector('.wc-body')
-      chatBody.scrollTop = chatBody.scrollHeight
-    }
-  }, [messages, isAgentTyping])
-
-  useEffect(() => {
-    const label = document.querySelector('.wc-form__label')
-
-    if (userMessage.length === 0) {
-      label.classList.remove('govuk-visually-hidden')
-    } else {
-      label.classList.add('govuk-visually-hidden')
-    }
-  }, [userMessage])
-
-  const onChange = e => {
-    setUserMessage(e.target?.value)
-  }
-
-  const agentName = agent?.nickname || agent?.firstName
-
-  const connectionHeadlineText = agentStatusHeadline(availability, agentStatus, agentName)
-
-  useEffect(() => {
-    if (connectionHeadlineText) {
-      setLiveRegionText(`Floodline webchat - ${connectionHeadlineText}`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [connectionHeadlineText])
-
-  useEffect(() => {
-    if (isAgentTyping && isChatOpen) {
-      setLiveRegionText(`${agentName} is typing...`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [isAgentTyping, isChatOpen])
-
-  useEffect(() => {
-    const lastAgentMessage = messages[messages.length - 1]
-
-    if (agentStatus !== 'closed' && lastAgentMessage?.direction === 'outbound') {
-      setLiveRegionText(`${agentName} said: ${lastAgentMessage.text}`)
-    }
-
-    return () => {
-      setLiveRegionText()
-    }
-  }, [messages])
-
-  const sendMessage = () => {
-    if (messageRef.current.value.length === 0 || agentStatus === 'closed') {
-      return
-    }
-
-    try {
-      const message = messageRef.current.value.trim()
-      thread.sendTextMessage(message)
-      setLiveRegionText(`You said: ${message}`)
-    } catch (err) {
-      console.log('[Chat Error] sendMessage', err)
-    }
-
-    setUserMessage('')
-  }
-
-  const handleSubmit = e => {
-    e.preventDefault()
-    sendMessage()
-  }
-
-  const saveChat = () => {
-    const transcript = formatTranscript(messages)
-
-    const saveChatLink = document.querySelector('#transcript-download')
-
-    saveChatLink.setAttribute('href', `data:text/plain;charset=utf-8,${transcript}`)
-  }
-
-  const handleKeyPress = e => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      switch (e.target.id) {
-        case 'text-area':
-          e.preventDefault()
-          sendMessage()
-          break
-        case 'end-chat':
-          onEndChatScreen(e)
-          break
-        case 'wc-settings':
-          onSettingsScreen(e)
-          break
-        case 'transcript-download':
-          saveChat()
-          break
-        default:
-          break
-      }
-    }
-    if (e.key === ' ') {
-      if (e.target.id === 'end-chat') {
-        onEndChatScreen(e)
-      }
-      if (e.target.id === 'wc-settings') {
-        onSettingsScreen(e)
-      }
-    }
-  }
-
-  return (
-    <>
-      <PanelHeader />
-
-      <div className='wc-status'>
-        <p className='wc-status__availability'>{connectionHeadlineText}</p>
-        <a
-          id='end-chat'
-          className='wc-status__link'
-          href='#'
-          data-module='govuk-button'
-          role='button'
-          onClick={onEndChatScreen}
-          onKeyDown={handleKeyPress}
-        >
-          End chat
-        </a>
-      </div>
-
-      <div className='wc-body' tabIndex='0'>
-        <ul className='wc-chat'>
-          {messages.length
-            ? messages.map((msg, index) => <Message key={msg.id} message={msg} previousMessage={messages[index - 1]} />)
-            : null}
-          {isAgentTyping
-            ? (
-              <li className='wc-chat__message outbound'>
-                <div className='wc-chat__from'>{agentName} is typing</div>
-                <div className='wc-chat__text outbound'>
-                  <svg width='28' height='16' x='0px' y='0px' viewBox='0 0 28 16'>
-                    <circle stroke='none' cx='3' cy='8' r='3' fill='currentColor' />
-                    <circle stroke='none' cx='14' cy='8' r='3' fill='currentColor' />
-                    <circle stroke='none' cx='25' cy='8' r='3' fill='currentColor' />
-                  </svg>
-                </div>
-              </li>
-              )
-            : null}
-        </ul>
-      </div>
-
-      <PanelFooter>
-        <form className={`wc-form${focusVisibleWithin ? ' wc-focus-within' : ''}`} noValidate onSubmit={handleSubmit}>
-          <label className='govuk-label wc-form__label' htmlFor='wc-form-textarea'>
-            Your message<span className='govuk-visually-hidden'> (enter key submits)</span>
-          </label>
-
-          <textarea
-            ref={messageRef}
-            rows='1'
-            aria-required='true'
-            className='wc-form__textarea'
-            id='text-area'
-            name='message'
-            onChange={onChange}
-            onKeyDown={handleKeyPress}
-            onFocus={() => { setFocusVisibleWithin(isKeyboard) }}
-            onBlur={() => { setFocusVisibleWithin(false) }}
-            value={userMessage}
-          />
-
-          <input
-            type='submit'
-            className='wc-form__button govuk-button'
-            value='Send'
-            data-prevent-double-click='true'
-          />
-        </form>
-
-        <div className='wc-footer__settings'>
-          <a
-            href='#'
-            id='wc-settings'
-            className='wc-footer__settings-link'
-            data-module='govuk-button'
-            onKeyDown={handleKeyPress}
-            onClick={onSettingsScreen}
-          >
-            Settings
-          </a>
-          <a
-            href='#'
-            id='transcript-download'
-            className='wc-footer__settings-link'
-            data-module='govuk-button'
-            download='floodline-webchat-transcript.txt'
-            onKeyDown={handleKeyPress}
-            onClick={saveChat}
-          >
-            Save chat
-          </a>
-        </div>
-      </PanelFooter>
-    </>
-  )
-}

package/src/client/components/errorSummary/error-summary.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-
-export const ErrorSummary = ({ errors }) => {
-  const errs = Object.keys(errors)
-
-  const goToInput = e => {
-    e.preventDefault()
-    const key = e.target.getAttribute('data-key')
-    document.querySelector(`#wc-${key}`).focus()
-  }
-
-  if (errs.length === 0) {
-    return null
-  }
-
-  return (
-    <div className='govuk-error-summary govuk-!-static-margin-bottom-7' data-module='govuk-error-summary' tabIndex='-1'>
-      <div role='alert'>
-        <h2 id='wc-error' className='wc-error-summary__title govuk-error-summary__title'>
-          There is a problem
-        </h2>
-        <div className='govuk-error-summary__body'>
-          <ul className='govuk-list govuk-error-summary__list wc-error-summary__list'>
-            {errs.map(key => (
-              <li key={key}>
-                <a href='#' data-key={key} onClick={goToInput}>{errors[key]}</a>
-              </li>
-            ))}
-          </ul>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/client/components/live-region.jsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react'
-import debounce from 'lodash.debounce'
-import { useApp } from '../store/useApp'
-
-const DEBOUNCE_MILLISECONDS = 2000
-
-export const LiveRegion = () => {
-  const { agentStatus, liveRegionText, setLiveRegionText } = useApp()
-
-  const [textA, setTextA] = useState()
-  const [textB, setTextB] = useState()
-
-  const isSessionEnded = agentStatus === 'closed' || agentStatus === null
-
-  const clearText = () => {
-    setTextA()
-    setTextB()
-  }
-
-  const setText = useCallback(debounce(text => {
-    if (textA) {
-      setTextB(text)
-    } else {
-      setTextA(text)
-    }
-  }, DEBOUNCE_MILLISECONDS), [textA, textB])
-
-  useEffect(() => {
-    if (liveRegionText) {
-      clearText()
-      setText(liveRegionText)
-    }
-
-    if (isSessionEnded) {
-      clearText()
-      setLiveRegionText()
-    }
-
-    return () => {
-      clearText()
-      setLiveRegionText()
-    }
-  }, [liveRegionText])
-
-  return (
-    <>
-      <div className='wc-live' role='status' aria-atomic='true'>
-        {textA}
-      </div>
-      <div className='wc-live' role='status' aria-atomic='true'>
-        {textB}
-      </div>
-    </>
-  )
-}

package/src/client/components/message/message.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { classnames } from '../../lib/classnames'
-import { formatMessage } from '../../lib/transform-messages'
-
-export function Message ({ message, previousMessage }) {
-  const outbound = message.direction === 'outbound'
-
-  const messageOwnerSameAsPrevious = message?.direction === previousMessage?.direction
-
-  return (
-    <li className={classnames('wc-chat__message', outbound ? 'outbound' : 'inbound')}>
-      <div className='wc-chat__from'>
-        {messageOwnerSameAsPrevious ? null : <span className={classnames(outbound ? 'outbound' : 'inbound')}>{outbound ? message.assignee : 'You'}</span>}
-        <span className='govuk-visually-hidden'>:</span>
-      </div>
-      <div className={classnames('wc-chat__text', outbound ? 'outbound' : 'inbound')}>
-        {formatMessage(message.text)}
-      </div>
-    </li>
-  )
-}

package/src/client/components/panel/panel-footer.jsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-export function PanelFooter ({ children }) {
-  return (
-    <div className='wc-footer'>
-      {children}
-    </div>
-  )
-}

package/src/client/components/panel/panel-header.jsx

@@ -1,75 +0,0 @@
-import React from 'react'
-import { useApp } from '../../store/useApp.js'
-import { historyReplaceState } from '../../lib/history.js'
-
-export function PanelHeader () {
-  const { thread, threadId, setChatVisibility, setUnseenCount, isMobile } = useApp()
-
-  const onClose = e => {
-    e.preventDefault()
-    setChatVisibility(false)
-    historyReplaceState()
-
-    if (threadId) {
-      thread?.lastMessageSeen()
-      setUnseenCount(0)
-    }
-  }
-
-  const BackButtonComponent = (
-    <button className='wc-header__back' aria-label='Close the webchat' onClick={onClose}>
-      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
-        <path d='M4.828,11L12.314,18.485L10.899,19.899L1,10L10.899,0.101L12.314,1.515L4.828,9L19,9L19,11L4.828,11Z' fill='currentColor' />
-      </svg>
-    </button>
-  )
-
-  const CloseButtonComponent = (
-    <button className='wc-header__close' aria-label='Close the webchat' onClick={onClose}>
-      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
-        <path d='M10,8.6L15.6,3L17,4.4L11.4,10L17,15.6L15.6,17L10,11.4L4.4,17L3,15.6L8.6,10L3,4.4L4.4,3L10,8.6Z' fill='currentColor' />
-      </svg>
-    </button>
-  )
-
-  const MinimiseButtonComponent = (
-    <button className='wc-header__hide' aria-label='Minimise the webchat' onClick={onClose}>
-      <svg aria-hidden='true' focusable='false' width='20' height='20' viewBox='0 0 20 20'>
-        <path d='M10 14.4l-7-7L4.4 6l5.6 5.6L15.6 6 17 7.4l-7 7z' fill='currentColor' />
-      </svg>
-    </button>
-  )
-
-  const isMobileAndHasHistory = isMobile && window.history.state
-  const isMobileAndNoHistory = isMobile && !window.history.state
-
-  let RightButtonComponent = CloseButtonComponent
-
-  if (threadId) {
-    RightButtonComponent = MinimiseButtonComponent
-
-    if (isMobileAndNoHistory) {
-      RightButtonComponent = MinimiseButtonComponent
-    }
-  }
-
-  if (!threadId && isMobileAndNoHistory) {
-    RightButtonComponent = CloseButtonComponent
-  }
-
-  if (isMobileAndHasHistory) {
-    RightButtonComponent = null
-  }
-
-  return (
-    <div className='wc-header'>
-      {isMobileAndHasHistory ? BackButtonComponent : null}
-
-      <h2 id='wc-header' className='wc-header__title'>
-        Floodline webchat
-      </h2>
-
-      {RightButtonComponent}
-    </div>
-  )
-}