@defra/flood-webchat 0.0.1-beta.2 → 0.0.1-beta.20

package/src/client/components/chat/chat.scss

@@ -0,0 +1,143 @@
+@keyframes blink {
+  50% {
+    fill: transparent
+  }
+}
+
+.wc-status {
+  display: flex;
+  border-bottom: 1px solid $govuk-border-colour;
+  padding: govuk-spacing(2);
+
+  &__availability {
+    margin-bottom: 0;
+  }
+
+  &__link {
+    margin-left: auto;
+  }
+}
+
+.defra-context-footer {
+  border-top:2px solid govuk-colour('blue');
+  margin-top: 30px;
+  padding-top: 10px;
+  @include mq ($from: tablet) {
+      margin-top: 40px;
+  }
+}
+
+.wc-chat {
+  &__messages {
+    overflow: auto;
+    list-style: none;
+    padding: 0;
+    margin: govuk-spacing(2) 0;
+  }
+
+  &__message {
+    margin-bottom: govuk-spacing(1);
+
+    &.inbound {
+      text-align: right;
+    }
+  }
+
+  &__from {
+    color: govuk-colour('dark-grey');
+    margin-bottom: 0;
+  }
+
+  &__text {
+    padding: govuk-spacing(2);
+    margin-bottom: 0;
+    display: inline-block;
+
+    &.inbound {
+      color: govuk-colour('white');
+      background-color: govuk-colour('blue');
+      border-radius: 8px 0 8px 8px;
+    }
+
+    &.outbound {
+      background-color: govuk-colour('light-grey');
+      border-radius: 0 8px 8px;
+    }
+
+    svg {
+      display: block;
+      color: govuk-colour('dark-grey');
+    }
+
+    svg circle {
+      animation: 1s blink infinite;
+      fill: currentcolor;
+
+      &:nth-child(2) {
+        animation-delay: 250ms
+      }
+
+      &:nth-child(3) {
+        animation-delay: 500ms
+      }
+    }
+  }
+}
+
+.wc-form {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  &__label {
+    position: absolute;
+    top: 9px;
+    left: 5px;
+    z-index: 3;
+    margin-bottom: 0;
+    color: govuk-colour('dark-grey');
+  }
+
+  &__textarea {
+    position: relative;
+    width: 100%;
+    margin-bottom: 0;
+    min-height: auto;
+    max-height: 120px;
+    resize: none;
+    border: none;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+    z-index: 4;
+    background-color: transparent;
+  }
+
+  &__button {
+    margin: auto 0 0 govuk-spacing(3);
+    width: auto;
+  }
+}
+
+.wc-footer {
+  &__settings {
+    @include govuk-responsive-padding(2);
+
+    display: flex;
+    flex-direction: row;
+    border-top: 1px solid govuk-colour('black');
+
+    &-link {
+      &:first-child {
+        margin-right: govuk-spacing(3);
+      }
+    }
+  }
+
+  &__input {
+    @include govuk-responsive-padding(2);
+
+    border-top: 1px solid govuk-colour('black');
+  }
+}

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

@@ -0,0 +1,34 @@
+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='govuk-error-summary__title'>
+          There is a problem
+        </h2>
+        <div className='govuk-error-summary__body'>
+          <ul className='govuk-list govuk-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/message/message.jsx

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

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

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

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

@@ -0,0 +1,43 @@
+import React from 'react'
+import { useApp } from '../../store/useApp.js'
+
+export function PanelHeader () {
+  const { thread, setChatVisibility, setUnseenCount } = useApp()
+
+  const onClose = e => {
+    e.preventDefault()
+    setChatVisibility(false)
+    if (thread) {
+      thread.lastMessageSeen()
+      setUnseenCount(0)
+    }
+  }
+
+  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,133 @@
+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 { Settings } from '../screens/settings.jsx'
+import { Feedback } from '../screens/feedback.jsx'
+
+import { useApp } from '../../store/useApp.js'
+import { useChatSdk } from '../../store/useChatSdk.js'
+import { useFocusedElements } from '../../hooks/useFocusedElements.js'
+import { EndFeedback } from '../screens/end-feedback.jsx'
+
+export function Panel () {
+  const { sdk, availability, thread, threadId, setThread, setThreadId, setChatVisibility, setMessages, setUnseenCount } = 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) {
+      if (thread) {
+        thread.lastMessageSeen()
+        setUnseenCount(0)
+        setScreen(2)
+      } else {
+        recover()
+      }
+    }
+  }, [thread, threadId])
+
+  const onEscapeKey = useCallback(e => {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      if (thread) {
+        thread.lastMessageSeen()
+        setUnseenCount(0)
+      }
+      setChatVisibility(false)
+    }
+  }, [])
+
+  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)
+  const goToEndFeedbackScreen = handleScreenChange(6)
+
+  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)} onConfirmSubmit={goToEndFeedbackScreen} />
+      break
+    case 5:
+      ScreenComponent = <Settings onCancel={goToChatScreen} />
+      break
+    case 6:
+      ScreenComponent = <EndFeedback onClose={() => setChatVisibility(false)} />
+      break
+    default:
+      ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
+  }
+
+  if (availability === 'UNAVAILABLE') {
+    ScreenComponent = <Unavailable />
+  }
+
+  const Component = (
+    <div id='wc-panel' role='dialog' className='wc-panel' 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,35 @@
+import React 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 } = useApp()
+
+  const confirmEndChat = async e => {
+    e.preventDefault()
+
+    setThreadId()
+    setMessages([])
+    setCustomerId()
+
+    // End chat if still open
+    if (agentStatus !== 'closed') {
+      thread.endChat()
+    }
+
+    onEndChatConfirm(e)
+  }
+
+  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' id='confirmEndChat' onClick={confirmEndChat}>Yes, end chat</a>
+          <a href='#' className='govuk-link govuk-!-font-size-16' onClick={onChatScreen}>No, resume chat</a>
+        </div>
+      </div>
+    </>
+  )
+}

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

@@ -0,0 +1,18 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function EndFeedback ({ onClose }) {
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <h3 id='wc-subtitle' class='govuk-heading-m'>Thank you for your feedback</h3>
+        <div>
+          <a href='#' role='button' draggable='false' data-module='govuk-button' data-wc-focus-visible data-wc-close-btn onClick={onClose}>Close window</a>
+        </div>
+      </div>
+
+    </>
+  )
+}

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

@@ -0,0 +1,149 @@
+import React from 'react'
+import { PanelHeader } from '../panel/panel-header.jsx'
+
+export function Feedback ({ onCancel, onConfirmSubmit }) {
+  const feedbackSubmit = async e => {
+    e.preventDefault()
+
+    console.log('feedback submitted')
+
+    onConfirmSubmit(e)
+  }
+  return (
+    <>
+      <PanelHeader />
+
+      <div className='wc-body'>
+        <h3 id='wc-subtitle' className='govuk-heading-s'>Give Feedback on Floodline webchat</h3>
+        <p>Please note we’re unable to respond to feedback.</p>
+        <div className='govuk-form-group'>
+          <fieldset className='govuk-fieldset govuk-!-margin-bottom-4'>
+            <legend className='govuk-fieldset-heading govuk-fieldset__legend'>
+              Overall, how did you feel about webchat?
+            </legend>
+            <div className='govuk-radios govuk-radios--small' data-module='govuk-radios'>
+              <div className='govuk-radios__item'>
+                <input
+                  id='very-satisfied'
+                  name='satisfaction'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='Very satisfied'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='very-satisfied'>Very satisfied</label>
+              </div>
+              <div className='govuk-radios__item'>
+                <input
+                  id='satisfied'
+                  name='satisfaction'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='Satisfied'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='satisfied'>Satisfied</label>
+              </div>
+              <div className='govuk-radios__item'>
+                <input
+                  id='no-opinion'
+                  name='satisfaction'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='No opinion'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='no-opinion'>No Opinion</label>
+              </div>
+              <div className='govuk-radios__item'>
+                <input
+                  id='dissatisfied'
+                  name='satisfaction'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='Dissatisfied'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='dissatisfied'>Dissatisfied</label>
+              </div>
+              <div className='govuk-radios__item'>
+                <input
+                  id='very-dissatisfied'
+                  name='satisfaction'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='Very dissatisfied'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='very-dissatisfied'>Very dissatisfied</label>
+              </div>
+            </div>
+          </fieldset>
+
+          <fieldset className='govuk-fieldset govuk-!-margin-bottom-4'>
+            <legend className='govuk-fieldset__legend'>
+              Did the adviser answer your question?
+            </legend>
+            <div className='govuk-radios govuk-radios--small' data-module='govuk-radios'>
+              <div className='govuk-radios__item'>
+                <input
+                  id='answer-yes'
+                  name='answer'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='Yes'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='answer-yes'>Yes</label>
+              </div>
+              <div className='govuk-radios__item'>
+                <input
+                  id='answer-no'
+                  name='answer'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='No'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='answer-no'>No</label>
+              </div>
+              <div className='govuk-radios__item'>
+                <input
+                  id='answer-partly'
+                  name='answer'
+                  type='radio'
+                  className='govuk-radios__input'
+                  value='Partly'
+                />
+
+                <label className='govuk-label govuk-radios__label' for='answer-partly'>Partly</label>
+              </div>
+            </div>
+          </fieldset>
+
+        </div>
+        <div className='govuk-form-group'>
+          <label className='govuk-label' for='improvements'>
+            How can we improve webchat? (optional)
+          </label>
+          <textarea className='govuk-textarea govuk-!-margin-bottom-4' id='improvements' name='improvements' rows='5' />
+        </div>
+
+        <div className='govuk-form-group'>
+          <label className='wc-fieldset-heading govuk-label' for='research'>
+            Tell us your email address if you want to take part in user research (optional)
+          </label>
+          <div id='research-hint' class='wc-hint govuk-hint'>
+            We will not share your email address or use it for anything else. We’ll delete it after 2 years.
+          </div>
+          <input className='govuk-input govuk-!-margin-bottom-4' id='research' name='research' aria-describedby='research-hint' type='text' />
+        </div>
+
+        <div className='govuk-button-group'>
+          <a id='feedback-save' href='#' className='govuk-button govuk-!-font-size-16' data-module='govuk-button' onClick={feedbackSubmit}>Submit</a>
+          <a id='feedback-cancel' href='#' className='govuk-link govuk-!-font-size-16' data-module='govuk-button' onClick={onCancel}>Cancel</a>
+        </div>
+      </div>
+    </>
+  )
+}