@defra/flood-webchat 0.0.1-beta.3 → 0.0.1-beta.30

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

@@ -0,0 +1,62 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function PreChat ({ onContinue }) {
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <div className='wc-content'>
+          <h3 className='wc-heading' aria-live='polite'>What you can use webchat for</h3>
+          <p>Webchat lets you talk directly to a Floodline adviser.</p>
+
+          <p>You can use webchat to get:</p>
+          <ul className='wc-list'>
+            <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>
+            There are other ways to&nbsp;
+            <a className='govuk-link' href='https://www.gov.uk/sign-up-for-flood-warnings' target='_blank' rel='noreferrer'>
+              sign up for flood warnings
+            </a>
+            &nbsp;and&nbsp;
+            <a className='govuk-link' href='https://www.fws.environment-agency.gov.uk/app/olr/login' target='_blank' rel='noreferrer'>
+              manage your flood warnings account
+            </a>.
+          </p>
+          <p>
+            Do not use webchat to&nbsp;
+            <a
+              className='govuk-link'
+              href='https://www.gov.uk/report-flood-cause'
+              target='_blank'
+              rel='noreferrer'
+            >
+              report a flood
+            </a>.
+          </p>
+
+          <button className='govuk-button wc-button govuk-!-margin-top-1' data-module='govuk-button' onClick={onContinue}>Continue</button>
+
+          <h3 className='wc-heading'>Other flood information</h3>
+
+          <p>Call Floodline for all other flood and flood warning information.</p>
+          <p>
+            <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' target='_blank' rel='noreferrer'>Find out more about call charges</a>
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,173 @@
+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'
+import { ErrorSummary } from '../errorSummary/error-summary.jsx'
+
+const QUESTION_MAX_LENGTH = 500
+
+export function RequestChat ({ onPreChatScreen }) {
+  const { sdk, setCustomerId, setThreadId, setThread } = useApp()
+  const { fetchCustomerId, fetchThread } = useChatSdk(sdk)
+  const [errors, setErrors] = useState({})
+  const [questionLength, setQuestionLength] = useState(0)
+  const [isButtonDisabled, setButtonDisabled] = useState(false)
+
+  const nameRef = useRef()
+  const questionRef = useRef()
+
+  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`
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length) {
+      document.querySelector('.govuk-error-summary')?.focus()
+    }
+  }, [errors])
+
+  const onQuestionChange = e => {
+    setQuestionLength(e.target.value.length)
+  }
+
+  const buttonLabel = isButtonDisabled ? 'Requesting...' : 'Request Chat'
+
+  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 {
+        setButtonDisabled(true)
+        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)
+        thread.setCustomField('threadid', threadId)
+      } catch (err) {
+        console.log('[Request Chat Error]', err)
+      }
+    }
+
+    setErrors(errs)
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <div className='wc-content'>
+          <a href='#' className='wc-back-link govuk-back-link' onClick={onPreChatScreen}>
+            What you can use webchat for
+          </a>
+
+          <ErrorSummary errors={errors} />
+
+          <h3 className='wc-heading' aria-live='polite'>
+            Your name and question
+          </h3>
+
+          <form>
+            <div className={classnames('wc-form-group', 'govuk-form-group', errors.name && 'govuk-form-group--error')}>
+              <label className='wc-label 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('wc-input', 'govuk-input', errors.name && 'govuk-input--error')}
+                id='wc-name'
+                name='name'
+                type='text'
+                data-testid='request-chat-user-name'
+              />
+            </div>
+
+            <div className='wc-form-group 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='wc-label 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('wc-textarea', 'govuk-textarea', 'govuk-js-character-count', !isQuestionLengthValid || errors.question ? 'govuk-textarea--error' : '')}
+                  data-testid='request-chat-user-question'
+                />
+                <div
+                  id='wc-question-info'
+                  className='wc-hint govuk-hint govuk-char-count__msg'
+                  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>
+
+            <div className='wc-inset-text govuk-inset-text'>
+              By selecting 'Request chat' you agree to the terms of our&nbsp;
+              <a href='https://check-for-flooding.service.gov.uk/privacy-notice' target='_blank' rel='noreferrer' className='govuk-link'>privacy notice</a>.
+            </div>
+
+            <button
+              className='wc-button govuk-button govuk-!-margin-top-1'
+              data-module='govuk-button'
+              onClick={onRequestChat}
+              disabled={isButtonDisabled}
+            >
+              {buttonLabel}
+            </button>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+import { useApp } from '../../store/useApp.js'
+
+export function Settings ({ onCancel }) {
+  const { settings, setSettings } = useApp()
+
+  const [optionAudio, setOptionAudio] = useState(settings.audio)
+  const [optionScroll, setOptionScroll] = useState(settings.scroll)
+
+  const onSave = e => {
+    e.preventDefault()
+
+    setSettings({ audio: optionAudio, scroll: optionScroll })
+    onCancel(e)
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <div className='wc-content'>
+          <fieldset className='govuk-fieldset govuk-!-margin-bottom-4'>
+            <legend className='govuk-fieldset__legend govuk-fieldset__legend'>
+              <h3 id='wc-subtitle' className='wc-heading'>Change settings</h3>
+            </legend>
+            <div className='govuk-checkboxes govuk-checkboxes--small' data-module='govuk-checkboxes'>
+              <div className='govuk-checkboxes__item'>
+                <input
+                  id='audio'
+                  name='audio'
+                  type='checkbox'
+                  value='audio'
+                  className='govuk-checkboxes__input'
+                  defaultChecked={optionAudio}
+                  onChange={() => setOptionAudio(!optionAudio)}
+                />
+                <label className='wc-label govuk-label govuk-checkboxes__label' htmlFor='audio'>
+                  Play a sound when receiving a new message
+                </label>
+              </div>
+              <div className='govuk-checkboxes__item'>
+                <input
+                  id='scroll'
+                  name='scroll'
+                  type='checkbox'
+                  value='scroll'
+                  className='govuk-checkboxes__input'
+                  defaultChecked={optionScroll}
+                  onChange={() => setOptionScroll(!optionScroll)}
+                />
+                <label className='wc-label govuk-label govuk-checkboxes__label' htmlFor='scroll'>
+                  Scroll automatically to a new message
+                </label>
+              </div>
+            </div>
+          </fieldset>
+
+          <div className='govuk-button-group'>
+            <a id='settings-save' href='#' className='wc-button govuk-button' data-module='govuk-button' onClick={onSave}>Save</a>
+            <a id='settings-cancel' href='#' className='wc-link govuk-link' data-module='govuk-button' role='button' onClick={onCancel}>Cancel</a>
+          </div>
+        </div>
+      </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,81 @@
+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.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/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/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) {
+    window.history.back()
+  }
+
+  const url = window.location.href.split('#')[0]
+  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,75 @@
+.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-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;
+}