@defra/flood-webchat 0.0.1-beta.9 → 1.0.2

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

@@ -0,0 +1,163 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { createPortal } from 'react-dom'
+import { classnames } from '../../lib/classnames.js'
+
+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 { Settings } from '../screens/settings.jsx'
+import { Feedback } from '../screens/feedback.jsx'
+import { LiveRegion } from '../live-region.jsx'
+
+import { useApp } from '../../store/useApp.js'
+import { useChatSdk } from '../../store/useChatSdk.js'
+import { useFocusedElements } from '../../hooks/useFocusedElements.js'
+import { historyReplaceState } from '../../lib/history.js'
+
+export function Panel () {
+  const { sdk, availability, instigatorId, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages, setUnseenCount, isMobile, isKeyboard } = useApp()
+  const { fetchThread, fetchMessages } = useChatSdk(sdk)
+
+  const [screen, setScreen] = useState(threadId ? 2 : 0)
+
+  useFocusedElements(screen)
+
+  const onEscapeKey = useCallback(e => {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      if (threadId) {
+        thread?.lastMessageSeen()
+        setUnseenCount(0)
+      }
+      setChatVisibility(false)
+      historyReplaceState()
+    }
+  }, [thread, threadId, setUnseenCount, setChatVisibility])
+
+  /**
+   * Focus previously focused element when closing the webchat
+   */
+  useEffect(() => {
+    return () => {
+      document.getElementById(instigatorId)?.focus()
+    }
+  }, [])
+
+  /**
+  * We need ammend classes on the body element to handle mobile behaviour
+  */
+  useEffect(() => {
+    document.body.classList.remove('wc-u-hidden')
+    document.getElementsByTagName('html')[0].classList.add('wc-u-html')
+    document.body.classList.add('wc-u-body')
+    return () => {
+      document.getElementsByTagName('html')[0].classList.remove('wc-u-html')
+      document.body.classList.remove('wc-u-body')
+    }
+  }, [isMobile])
+
+  /**
+   * Initializes the eventListener for pressing the escape key
+   */
+  useEffect(() => {
+    document.addEventListener('keydown', onEscapeKey)
+
+    return () => {
+      document.removeEventListener('keydown', onEscapeKey)
+    }
+  }, [onEscapeKey, setChatVisibility])
+
+  /**
+   * 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) {
+      if (thread) {
+        thread.lastMessageSeen()
+        setUnseenCount(0)
+        setScreen(2)
+      } else {
+        recover()
+      }
+    }
+  }, [thread, threadId])
+
+  const handleScreenChange = newScreen => e => {
+    e.preventDefault()
+    setScreen(newScreen)
+  }
+
+  const goToPreChatScreen = handleScreenChange(0)
+  const goToRequestChatScreen = handleScreenChange(1)
+  const goToChatScreen = handleScreenChange(2)
+  const goToEndChatScreen = handleScreenChange(3)
+  const goToFeedbackScreen = handleScreenChange(4)
+  const goToSettingsScreen = handleScreenChange(5)
+
+  let ScreenComponent
+
+  switch (screen) {
+    case 0:
+      ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
+      break
+    case 1:
+      ScreenComponent = <RequestChat onPreChatScreen={goToPreChatScreen} />
+      break
+    case 2:
+      ScreenComponent = <Chat onSettingsScreen={goToSettingsScreen} onEndChatScreen={goToEndChatScreen} />
+      break
+    case 3:
+      ScreenComponent = <EndChat onChatScreen={goToChatScreen} onEndChatConfirm={goToFeedbackScreen} />
+      break
+    case 4:
+      ScreenComponent = (
+        <Feedback onCancel={() => {
+          setChatVisibility(false)
+          historyReplaceState()
+        }}
+        />
+      )
+      break
+    case 5:
+      ScreenComponent = <Settings onCancel={goToChatScreen} />
+      break
+    default:
+      ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
+  }
+
+  if (availability === 'UNAVAILABLE') {
+    ScreenComponent = <Unavailable />
+  }
+
+  const Component = (
+    <div id='wc-panel' role='dialog' className={classnames('wc-panel', isKeyboard && 'wc-focus-visible')} tabIndex='-1' aria-modal='true' aria-labelledby='wc-header wc-subtitle'>
+      <div className='wc-panel__inner'>
+        {ScreenComponent}
+      </div>
+      <LiveRegion />
+    </div>
+  )
+
+  return (
+    <>
+      {createPortal(Component, document.body)}
+    </>
+  )
+}

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

@@ -0,0 +1,112 @@
+.wc-panel {
+  display: flex;
+  position: fixed;
+  flex-wrap: nowrap;
+  z-index: 999;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x pan-y;
+  background-color: #ffffff;
+  @include mq ($from: tablet) {
+    top: auto;
+    left: auto;
+    width: 400px;
+    height: 540px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus.wc-focus-visible::after {
+    @include focus($glow: 5px, $strong: 2px, $background: 0, $inset: 0);
+    left: 4px;
+    right: 4px;
+    top: 4px;
+    bottom: 4px;
+  }
+
+  &__inner {
+    position: relative;
+    flex: 0 0 100%;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    background-color: transparent;
+    border: 0;
+    outline: 0;
+    @include mq ($from: tablet) {
+      border: 1px solid govuk-colour('black');
+    }
+    box-sizing: border-box;
+  }
+}
+
+.wc-header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  background-color: govuk-colour('black');
+  border-bottom: 1px solid govuk-colour('black');
+  padding: 3px;
+
+  &__link {
+    margin: 0 govuk-spacing(2);
+  }
+
+  &__title {
+    @extend %govuk-heading-s;
+    font-size: 19px;
+    padding: 0 0 0 10px;
+    @include mq ($from: tablet) {
+      padding-left: 7px;
+    }
+    color: govuk-colour('white');
+    margin-bottom: 0;
+  }
+
+  &__close,
+  &__hide,
+  &__back {
+    display: flex;
+    justify-content: center;
+    color: govuk-colour('white');
+    background: none;
+    border: 0;
+    padding: 7px;
+    margin: 0 0 0 auto;
+    cursor: pointer;
+
+    &:focus {
+      outline: 3px solid $govuk-focus-colour;
+    }
+  }
+
+  &__back {
+    margin: 0;
+    display: flex;
+
+    @include mq ($from: 'tablet') {
+      display: none
+    }
+  }
+}
+
+.wc-body {
+  font-size: 16px;
+  flex: 1;
+  position: relative;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.wc-content {
+  padding: 20px 15px;
+}

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

@@ -0,0 +1,77 @@
+import React, { useEffect } from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+import { useApp } from '../../store/useApp.js'
+
+export function EndChat ({ onChatScreen, onEndChatConfirm }) {
+  const { setCustomerId, setThreadId, setMessages, agentStatus, thread, threadId, setUnseenCount, isKeyboard } = useApp()
+
+  const confirmEndChat = async e => {
+    e.preventDefault()
+
+    window.localStorage.setItem('tmpThreadId', threadId)
+    setThreadId()
+    setMessages([])
+    setCustomerId()
+    thread.lastMessageSeen()
+    setUnseenCount(0)
+
+    // End chat if still open
+    if (agentStatus !== 'closed') {
+      thread.endChat()
+    }
+
+    onEndChatConfirm(e)
+  }
+
+  useEffect(() => {
+    if (isKeyboard) {
+      setTimeout(() => {
+        document.querySelector('#confirm-endchat').focus()
+      }, 10)
+    }
+  }, [])
+
+  const handleKeyPress = e => {
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'confirm-endchat') {
+      confirmEndChat(e)
+    }
+    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'resume-chat') {
+      onChatScreen(e)
+    }
+  }
+
+  return (
+    <>
+      <PanelHeader />
+      <div className='wc-body'>
+        <div className='wc-content'>
+          <h3 id='wc-subtitle' className='wc-heading' aria-live='polite'>Are you sure you want to end the chat?</h3>
+          <div className='govuk-button-group'>
+            <a
+              id='confirm-endchat'
+              href='#endChat'
+              role='button'
+              className='wc-button govuk-button'
+              data-module='govuk-button'
+              onClick={confirmEndChat}
+              onKeyDown={handleKeyPress}
+            >
+              Yes, end chat
+            </a>
+            <a
+              id='resume-chat'
+              href='#resumeChat'
+              role='button'
+              className='wc-link govuk-link'
+              data-module='govuk-button'
+              onClick={onChatScreen}
+              onKeyDown={handleKeyPress}
+            >
+              No, resume chat
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,65 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function Feedback ({ onCancel }) {
+  const feedbackSend = () => {
+    const tmpThreadId = window.localStorage.getItem('tmpThreadId')
+    window.location.href = `https://defragroup.eu.qualtrics.com/jfe/form/SV_8dgFSJcxxIfqx5Y?Id=${tmpThreadId}&Source=${window.location.href}`
+    window.localStorage.removeItem('tmpThreadId')
+  }
+
+  const feedbackClose = async e => {
+    window.localStorage.removeItem('tmpThreadId')
+    onCancel(e)
+  }
+
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      if (e.target.id === 'feedback-close') {
+        feedbackClose(e)
+      }
+      if (e.target.id === 'feedback-send') {
+        feedbackSend()
+      }
+    }
+  }
+
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <div className='wc-content'>
+          <h3 id='wc-subtitle' className='wc-heading'>Give feedback on Floodline webchat</h3>
+          <p>We're running webchat as a trial. you can&nbsp;
+            <a
+              id='feedback-send'
+              className='govuk-link'
+              href='#'
+              target='_blank'
+              rel='noreferrer'
+              onKeyDown={handleKeyPress}
+              onClick={feedbackSend}
+            >
+              give feedback
+            </a>
+            &nbsp;to help us improve it.
+          </p>
+          <p>
+            <a
+              id='feedback-close'
+              className='wc-link govuk-link'
+              href='#'
+              data-module='govuk-button'
+              role='button'
+              onKeyDown={handleKeyPress}
+              onClick={feedbackClose}
+            >
+              Close
+            </a>
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}

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 id='wc-subtitle' 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,183 @@
+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, setLiveRegionText } = 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'
+
+  useEffect(() => {
+    if (isButtonDisabled) {
+      setLiveRegionText(buttonLabel)
+    }
+  }, [isButtonDisabled])
+
+  const onRequestChat = async e => {
+    e.preventDefault()
+
+    if (isButtonDisabled) {
+      return
+    }
+
+    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 id='wc-subtitle' 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}
+              aria-disabled={isButtonDisabled}
+            >
+              {buttonLabel}
+            </button>
+          </form>
+        </div>
+      </div>
+    </>
+  )
+}