@defra/flood-webchat 0.0.1-beta.1 → 0.0.1-beta.11

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

@@ -0,0 +1,39 @@
+import React from 'react'
+import { useApp } from '../../store/useApp.js'
+
+export function PanelHeader () {
+  const { thread, setChatVisibility } = useApp()
+
+  const onClose = e => {
+    e.preventDefault()
+    setChatVisibility(false)
+  }
+
+  let ButtonComponent = (
+    <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>
+  )
+
+  if (thread) {
+    ButtonComponent = (
+      <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>
+    )
+  }
+
+  return (
+    <div className='wc-header'>
+      <h2 id='wc-header-title' className='wc-header__title govuk-heading-s'>
+        Floodline Webchat
+      </h2>
+
+      {ButtonComponent}
+    </div>
+  )
+}

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

@@ -0,0 +1,113 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+
+import { PreChat } from '../screens/pre-chat.jsx'
+import { RequestChat } from '../screens/request-chat.jsx'
+import { Chat } from '../chat/chat.jsx'
+import { Unavailable } from '../screens/unavailable.jsx'
+import { EndChat } from '../screens/end-chat.jsx'
+
+import { useApp } from '../../store/useApp.js'
+import { useChatSdk } from '../../store/useChatSdk.js'
+import { useFocusedElements } from '../../hooks/useFocusedElements.js'
+
+export function Panel () {
+  const { sdk, availability, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages } = useApp()
+  const { fetchThread, fetchMessages } = useChatSdk(sdk)
+
+  const [screen, setScreen] = useState(threadId ? 2 : 0)
+
+  useFocusedElements(screen)
+
+  /**
+   * Initializes the eventListener for pressing the escape key
+   */
+  useEffect(() => {
+    const escapeKeyEvent = document.addEventListener('keydown', onEscapeKey)
+
+    return () => {
+      document.removeEventListener('keydown', escapeKeyEvent)
+    }
+  }, [])
+
+  /**
+   * Recovers the thread if there is a threadId but no thread loaded in to state
+   */
+  useEffect(() => {
+    const recover = async () => {
+      try {
+        const fetchedThread = await fetchThread(threadId)
+        setThread(fetchedThread)
+
+        const fetchedMessages = await fetchMessages(fetchedThread, threadId)
+        setMessages(fetchedMessages)
+      } catch (err) {
+        console.log('[Chat Error] fetchThread', err)
+
+        setThreadId()
+        setThread()
+        setScreen(0)
+      }
+    }
+
+    if (threadId) {
+      (thread) ? setScreen(2) : recover()
+    }
+  }, [thread, threadId])
+
+  const onEscapeKey = useCallback(e => {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      setChatVisibility(false)
+    }
+  }, [])
+
+  const handleScreenChange = newScreen => e => {
+    e.preventDefault()
+    setScreen(newScreen)
+  }
+
+  const onForward = handleScreenChange(screen + 1)
+  const onBack = handleScreenChange(screen - 1)
+  const onEndChat = handleScreenChange(3)
+  const onResume = handleScreenChange(2)
+
+  const onEndChatConfirm = e => {
+    e.preventDefault()
+    console.log('confirmed end chat')
+  }
+
+  let ScreenComponent
+
+  switch (screen) {
+    case 0:
+      ScreenComponent = <PreChat onForward={onForward} />
+      break
+    case 1:
+      ScreenComponent = <RequestChat onBack={onBack} />
+      break
+    case 2:
+      ScreenComponent = <Chat setScreen={setScreen} onEndChat={onEndChat} />
+      break
+    case 3:
+      ScreenComponent = <EndChat onResume={onResume} onEndChatConfirm={onEndChatConfirm} />
+      break
+    default:
+      ScreenComponent = <PreChat onForward={onForward} />
+  }
+
+  if (availability === 'UNAVAILABLE') {
+    ScreenComponent = <Unavailable />
+  }
+
+  const Component = (
+    <div id='wc-panel' className='wc-panel' role='dialog' tabIndex='-1' aria-modal='true' aria-labelledby='wc-header-title'>
+      {ScreenComponent}
+    </div>
+  )
+
+  return (
+    <>
+      {createPortal(Component, document.body)}
+    </>
+  )
+}

package/src/client/components/panel/panel.scss

@@ -0,0 +1,72 @@
+.wc-panel {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: govuk-colour('white');
+  border: 1px solid govuk-colour('black');
+  z-index: 999;
+  outline: none;
+
+  @include mq ($from: 'tablet') {
+    bottom: 0;
+    right: 0;
+    top: auto;
+    left: auto;
+    width: 400px;
+    height: 540px;
+    margin-bottom: 10px;
+    margin-right: 10px;
+  }
+}
+
+.wc-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: govuk-colour('black');
+
+  &__link {
+    margin: 0 govuk-spacing(2);
+  }
+
+  &__title {
+    padding: 0 0 0 govuk-spacing(2);
+    color: govuk-colour('white');
+    margin-bottom: 0;
+  }
+
+  &__close,
+  &__hide {
+    display: flex;
+    justify-content: center;
+    color: govuk-colour('white');
+    background: none;
+    border: 0;
+    padding: govuk-spacing(2);
+    margin: 0 0 0 auto;
+    cursor: pointer;
+
+    &:focus {
+      @include govuk-focused-text;
+    }
+  }
+}
+
+.wc-body {
+  @include govuk-responsive-padding(3);
+
+  flex: 1;
+  position: relative;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.wc-back-link {
+  margin: govuk-spacing(1) 0 govuk-spacing(6) 0;
+}

package/src/client/components/screens/end-chat.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function EndChat ({ onResume, onEndChatConfirm }) {
+  return (
+    <>
+      <PanelHeader />
+      <div className='wc-body'>
+        <h3 className='govuk-heading-s' aria-live='polite'>Are you sure you want to end the chat?</h3>
+        <div className='govuk-button-group'>
+          <a href='#' className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onEndChatConfirm}>Yes, end chat</a>
+          <a href='#' className='govuk-link govuk-!-font-size-16' onClick={onResume}>No, resume chat</a>
+        </div>
+      </div>
+    </>
+  )
+}

package/src/client/components/screens/pre-chat.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function PreChat ({ onForward }) {
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <h3 className='govuk-heading-s' aria-live='polite'>What you can use webchat for</h3>
+        <p className='govuk-body-s'>Webchat lets you talk directly to a Floodline adviser.</p>
+
+        <p className='govuk-body-s'>You can use webchat to get:</p>
+        <ul className='govuk-list govuk-list--bullet govuk-body-s'>
+          <li>current flood warnings and alerts in your area</li>
+          <li>information on the flood warning service</li>
+          <li>advice on what to do before, during and after a flood</li>
+        </ul>
+
+        <p className='govuk-body-s'>
+          {
+            'There are other ways to '
+          }
+          <a className='govuk-link' href='https://www.gov.uk/sign-up-for-flood-warnings'>
+            sign up for flood warnings
+          </a>
+          {
+            ' and '
+          }
+          <a className='govuk-link' href='https://www.fws.environment-agency.gov.uk/app/olr/login'>
+            manage your flood warnings account
+          </a>.
+        </p>
+        <p className='govuk-body-s'>Do not use webchat to <a className='govuk-link' href='https://www.gov.uk/report-flood-cause'>report a flood</a>.</p>
+
+        <button className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={onForward}>Continue</button>
+
+        <h3 className='govuk-heading-s'>Other flood information</h3>
+
+        <p className='govuk-body-s'>Call Floodline for all other flood and flood warning information.</p>
+        <p className='govuk-body-s'>
+          <strong>Floodline helpline</strong>
+          <br />
+          Telephone: 0345 988 1188
+          <br />
+          Textphone: 0345 602 6340
+          <br />
+          Open 24 hours a day, 7 days a week
+          <br />
+          <a className='govuk-link' href='https://gov.uk/call-charges'>Find out more about call charges</a>
+        </p>
+      </div>
+    </>
+  )
+}

package/src/client/components/screens/request-chat.jsx

@@ -0,0 +1,170 @@
+import React, { useRef, useState, useEffect } from 'react'
+import * as uuid from 'uuid'
+
+import { classnames } from '../../lib/classnames.js'
+import { PanelHeader } from '../panel/panel-header.jsx'
+import { useApp } from '../../store/useApp.js'
+import { useChatSdk } from '../../store/useChatSdk.js'
+
+const QUESTION_MAX_LENGTH = 500
+
+export function RequestChat ({ onBack }) {
+  const { sdk, setCustomerId, setThreadId, setThread } = useApp()
+  const { fetchCustomerId, fetchThread } = useChatSdk(sdk)
+
+  const [errors, setErrors] = useState({})
+  const [questionLength, setQuestionLength] = useState(0)
+
+  const nameRef = useRef()
+  const questionRef = useRef()
+
+  useEffect(() => {
+    if (Object.keys(errors).length) {
+      document.querySelector('.govuk-error-summary')?.focus()
+    }
+  }, [errors])
+
+  const onQuestionChange = e => {
+    setQuestionLength(e.target.value.length)
+  }
+
+  const onRequestChat = async e => {
+    e.preventDefault()
+
+    const errs = {}
+
+    if (nameRef.current.value.length === 0) {
+      errs.name = 'Enter your name'
+    }
+
+    if (questionRef.current.value.length === 0) {
+      errs.question = 'Enter your question'
+    }
+
+    if (questionRef.current.value.length > QUESTION_MAX_LENGTH) {
+      errs.question = 'Your question must be 500 characters or less'
+    }
+
+    if (Object.keys(errs).length === 0) {
+      try {
+        const threadId = uuid.v4()
+        const customerId = await fetchCustomerId()
+        const thread = await fetchThread(threadId)
+
+        sdk.getCustomer().setName(nameRef.current.value)
+
+        await thread.startChat(questionRef.current.value || 'Begin conversation')
+
+        setCustomerId(customerId)
+        setThreadId(threadId)
+        setThread(thread)
+      } catch (err) {
+        console.log('[Request Chat Error]', err)
+      }
+    }
+
+    setErrors(errs)
+  }
+
+  const isQuestionLengthValid = QUESTION_MAX_LENGTH >= questionLength
+  const questionLengthRemaining = QUESTION_MAX_LENGTH - questionLength
+  const questionLengthExceeded = questionLength - QUESTION_MAX_LENGTH
+
+  let questionHint = `You have ${questionLengthRemaining} characters remaining`
+
+  if (!isQuestionLengthValid) {
+    questionHint = `You have ${questionLengthExceeded} characters too many`
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <a href='#' className='wc-back-link govuk-back-link' onClick={onBack}>What you can use webchat for</a>
+
+        {Object.keys(errors).length > 0
+          ? (
+            <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='govuk-error-summary__title'>
+                  There is a problem
+                </h2>
+                <div className='govuk-error-summary__body'>
+                  <ul className='govuk-list govuk-error-summary__list'>
+                    {Object.keys(errors).map(key => (
+                      <li key={key}>
+                        <a href={`#${key}`}>{errors[key]}</a>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            </div>
+            )
+          : null}
+
+        <h3 className='govuk-heading-s' aria-live='polite'>Your name and question</h3>
+
+        <form>
+          <div className={classnames('govuk-form-group', errors.name && 'govuk-form-group--error')}>
+            <label className='govuk-label' htmlFor='wc-name'>
+              Your name
+            </label>
+            {errors.name && (
+              <p className='govuk-error-message'>
+                <span className='govuk-visually-hidden'>Error:</span> {errors.name}
+              </p>
+            )}
+            <input
+              ref={nameRef}
+              className={classnames('govuk-input', errors.name && 'govuk-input--error')}
+              id='wc-name'
+              name='name'
+              type='text'
+              data-testid='request-chat-user-name'
+            />
+          </div>
+
+          <div className='govuk-character-count' data-module='govuk-character-count' data-maxlength='500'>
+            <div className={classnames('govuk-form-group', errors.question && 'govuk-form-group--error')}>
+              <label className='govuk-label' htmlFor='wc-question'>
+                Your question
+              </label>
+              {errors.question && (
+                <p className='govuk-error-message'>
+                  <span className='govuk-visually-hidden'>Error:</span>
+                  {errors.question}
+                </p>
+              )}
+              <textarea
+                ref={questionRef}
+                id='wc-question'
+                name='question'
+                rows='5'
+                aria-describedby='wc-question-info'
+                onChange={onQuestionChange}
+                className={classnames('govuk-textarea', 'govuk-js-character-count', !isQuestionLengthValid || errors.question ? 'govuk-textarea--error' : '')}
+                data-testid='request-chat-user-question'
+              />
+              <div id='wc-question-info' className='govuk-hint govuk-character-count__message' style={{ color: `${!isQuestionLengthValid ? '#d4351c' : ''}` }} aria-hidden='true'>
+                {questionHint}
+              </div>
+              <div className='govuk-character-count__sr-status govuk-visually-hidden' aria-live='polite'>
+                {questionHint}
+              </div>
+            </div>
+          </div>
+
+          <button
+            className='govuk-button govuk-!-margin-top-1 govuk-!-font-size-16'
+            data-module='govuk-button'
+            onClick={onRequestChat}
+          >
+            Request chat
+          </button>
+        </form>
+      </div>
+    </>
+  )
+}

package/src/client/components/screens/unavailable.jsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function Unavailable () {
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <h3 id='wc-subtitle' className='govuk-heading-m'>Webchat is currently not available</h3>
+        <p className='govuk-body-s'>Try again later, or call Floodline:</p>
+        <p className='govuk-body-s'>
+          <strong>Floodline helpline</strong>
+          <br />Telephone: 0345 988 1188
+          <br />Textphone: 0345 602 6340
+          <br />Open 24 hours a day, 7 days a week
+          <br /><a className='govuk-link' href='https://gov.uk/call-charges'>Find out more about call charges</a>
+        </p>
+        <p className='govuk-body-s'>We're running webchat as a trial, it will not always be available.</p>
+      </div>
+    </>
+  )
+}

package/src/client/hooks/useFocusedElements.js

@@ -0,0 +1,71 @@
+import { useState, useEffect, useCallback } from 'react'
+
+const setAriaHidden = bool => {
+  for (const node of document.body.children) {
+    if (node.id !== 'wc-panel') {
+      (bool) ? node.setAttribute('aria-hidden', 'true') : node.removeAttribute('aria-hidden')
+    }
+  }
+}
+
+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.body.querySelector('.wc-availability__link')?.focus()
+      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/reducer.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}>
+      <Availability availability={availability} />
+    </AppProvider>
+  )
 }

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/transform-messages.js

@@ -0,0 +1,14 @@
+import sanitizeHtml from 'sanitize-html'
+
+export const transformMessage = message => {
+  return {
+    id: message.id,
+    text: sanitizeHtml(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))