@defra/flood-webchat 0.0.1-beta.4 → 0.0.1-beta.40

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

@@ -0,0 +1,233 @@
+@keyframes blink {
+  50% {
+    fill: transparent
+  }
+}
+
+.wc-status {
+  display: flex;
+  position: relative;
+  padding: 15px;
+  @include mq ($from: tablet) {
+    padding: 10px;
+  }
+
+  &::after {
+    position: absolute;
+    content: "";
+    bottom: 0;
+    left: 15px;
+    right: 15px;
+    height: 0;
+    border-bottom: 1px solid $govuk-border-colour;
+    @include mq ($from: tablet) {
+      left: 10px;
+      right: 10px;
+    }
+  }
+
+  &__availability {
+    font-size: 16px;
+    margin-bottom: 0;
+  }
+
+  &__link {
+    @extend %wc-link-button;
+    margin-left: auto;
+  }
+}
+
+.wc-body[tabindex="0"]:focus-visible {
+  outline: 3px solid transparent;
+  outline-offset: -2px;
+  box-shadow:
+    inset 0 0 0 2px $govuk-focus-colour,
+    inset 0 0 0 4px govuk-colour('black'), 
+    0 0 0 1px $govuk-focus-colour;
+}
+
+.wc-chat {
+  @extend %govuk-body-s;
+  line-height: 1.25;
+  font-size: 14px;
+  overflow: auto;
+  list-style: none;
+  padding: 0;
+
+  &__message {
+    margin: 5px 15px 0;
+    @include mq ($from: tablet) {
+      margin-left: 10px;
+      margin-right: 10px;
+    }
+
+    &:first-child {
+      padding-top: 15px;
+    }
+
+    &.inbound {
+      text-align: right;
+    }
+  }
+
+  &__from {
+    line-height: 1.25;
+    color: govuk-colour('dark-grey');
+    margin-top: 2px;
+    margin-bottom: 2px;
+  }
+
+  &__text {
+    font-size: 16px;
+    padding: 10px 12.5px;
+    margin-bottom: 0;
+    display: inline-block;
+    border: 1px solid transparent;
+
+    @media (forced-colors: active) {
+      border-color: currentColor;
+    }
+
+    &.inbound {
+      color: govuk-colour('white');
+      background-color: govuk-colour('blue');
+      border-radius: 10px 0 10px 10px;
+    }
+
+    &.outbound {
+      background-color: govuk-colour('light-grey');
+      border-radius: 0 10px 10px;
+    }
+
+    svg {
+      display: block;
+      color: govuk-colour('dark-grey');
+    }
+    
+    @media (forced-colors: active) {
+      svg {
+        color: currentColor;
+      }
+    }
+    
+
+    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-wrap: nowrap;
+  align-items: baseline;
+  border-top: 1px solid govuk-colour('black');
+  border-bottom: 1px solid govuk-colour('black');
+
+  &__label {
+    position: absolute;
+    pointer-events: none;
+    font-size: 16px;
+    line-height: 20px;
+    margin: 20px;
+    @include mq ($from: tablet) {
+      margin: 18px 18px 19px;
+    }
+    left: 0;
+    bottom: 0;
+    color: $govuk-secondary-text-colour;
+    z-index: 3;
+  }
+
+  &__textarea {
+    @extend %govuk-body-s;
+    box-sizing: border-box;
+    min-height: auto;
+    font-size: 16px;
+    line-height: 20px;
+    max-height: 120px;
+    flex: 1 1 auto;
+    align-self: flex-end;
+    margin: 20px;
+    @include mq ($from: tablet) {
+      margin: 18px 18px 19px;
+    }
+    padding: 0;
+    border: 0;
+    height: 20px;
+    resize: none;
+    overflow-x: hidden;
+    overscroll-behavior: contain;
+
+    &:focus {
+      outline: none;
+      box-shadow: none;
+      z-index: 2;
+    }
+  }
+
+  &__button {
+    margin: 10px 15px 12px 0;
+    @include mq ($from: tablet) {
+      margin-right: 10px;
+    }
+    font-size: 16px;
+    position: relative;
+    flex: 0 0 auto;
+    align-self: flex-end;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    width: auto;
+    cursor: pointer;
+  }
+
+  &.wc-focus-within::after {
+    @include focus($glow: 5px, $strong: 2px, $background: 0, $inset: 0);
+    left: 4px;
+    right: 4px;
+    top: 4px;
+    bottom: 4px;
+  }
+}
+
+.wc-body:focus-visible + .wc-footer .wc-form {
+  border-top: 1px solid transparent;
+}
+
+.wc-footer {
+  position: relative;
+  flex: 0 0 0;
+
+  &__settings {
+    @include govuk-responsive-padding(2);
+
+    display: flex;
+    flex-direction: row;
+
+    &-link {
+      @extend %wc-link-button;
+
+      &: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='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/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', outbound ? 'outbound' : 'inbound')}>
+      <div className='wc-chat__from'>
+        {messageOwnerSameAsPrevious ? null : <span>{outbound ? message.assignee : 'You'}</span>}
+        <span className='govuk-visually-hidden'>:</span>
+      </div>
+      <div className={classnames('wc-chat__text', outbound ? 'outbound' : 'inbound')}>
+        {message.text}
+      </div>
+    </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

@@ -1,7 +1,30 @@
 import React from 'react'
+import { useApp } from '../../store/useApp.js'
+import { historyReplaceState } from '../../lib/history.js'
 
-export function PanelHeader ({ screen, isConnected, onBack, onClose }) {
-  let ButtonComponent = (
+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' />
@@ -9,27 +32,44 @@ export function PanelHeader ({ screen, isConnected, onBack, onClose }) {
     </button>
   )
 
-  if (isConnected) {
-    ButtonComponent = (
-      <button className='wc-hide-btn' aria-label='Minimise the webchat' data-wc-hide-btn>
-        <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 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
+    }
   }
 
-  const BackButtonComponent = !isConnected && screen !== 0 ? <a href='#' className='wc-header__link govuk-back-link govuk-back-link--inverse' onClick={onBack}>Back</a> : null
+  if (!threadId && isMobileAndNoHistory) {
+    RightButtonComponent = CloseButtonComponent
+  }
+
+  if (isMobileAndHasHistory) {
+    RightButtonComponent = null
+  }
 
   return (
     <div className='wc-header'>
-      {BackButtonComponent}
+      {isMobileAndHasHistory ? BackButtonComponent : null}
 
-      <h2 id='wc-header-title' className='wc-header__title govuk-heading-s'>
+      <h2 id='wc-header-title' className='wc-header__title'>
         Floodline Webchat
       </h2>
 
-      {ButtonComponent}
+      {RightButtonComponent}
     </div>
   )
 }

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

@@ -1,106 +1,147 @@
 import React, { useEffect, useState, useCallback } from 'react'
 import { createPortal } from 'react-dom'
+import { classnames } from '../../lib/classnames.js'
 
-import { PanelHeader } from './panel-header.jsx'
 import { PreChat } from '../screens/pre-chat.jsx'
 import { RequestChat } from '../screens/request-chat.jsx'
-
-export 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"]'))
-}
-
-export function Panel ({ screenNumber, onClose }) {
-  const [screen, setScreen] = useState(screenNumber)
-  const [panelElements, setPanelElements] = useState([])
-
-  const onKeyDown = useCallback((e) => {
-    if (e.key === 'Escape' || e.key === 'Esc') return onClose()
-
-    if (e.key === 'Tab') {
-      const webchatPanelElement = document.querySelector('#wc-panel')
-
-      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()
+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 { 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()
+      document.getElementById(instigatorId)?.focus()
     }
-  }, [panelElements])
+  }, [thread, threadId, setUnseenCount, setChatVisibility])
 
+  /**
+  * We need ammend classes on the body element to handle mobile behaviour
+  */
   useEffect(() => {
-    setPanelElements(getFocusableElements())
-  }, [screen])
+    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(() => {
-    setAriaHidden(true)
-    document.querySelector('#wc-panel').focus()
-    document.addEventListener('keydown', onKeyDown)
+    document.addEventListener('keydown', onEscapeKey)
 
     return () => {
-      setAriaHidden()
-      document.body.querySelector('.wc-availability__link')?.focus()
-      document.removeEventListener('keydown', onKeyDown)
+      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()
+      }
     }
-  }, [panelElements])
+  }, [thread, threadId])
 
-  const onBack = (e) => {
+  const handleScreenChange = newScreen => e => {
     e.preventDefault()
-    setScreen(screen - 1)
+    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 screen={screen} setScreen={setScreen} />
+      ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
       break
     case 1:
-      ScreenComponent = <RequestChat onBack={onBack} />
+      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)} />
+      break
+    case 5:
+      ScreenComponent = <Settings onCancel={goToChatScreen} />
       break
     default:
-      ScreenComponent = <PreChat screen={screen} setScreen={setScreen} />
+      ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
   }
 
-  const Component = (
-    <div id='wc-panel' className='wc-panel' role='dialog' tabIndex='-1' aria-modal='true' aria-labelledby='wc-header-title'>
-      <PanelHeader screen={screen} isConnected={false} onBack={onBack} onClose={onClose} />
+  if (availability === 'UNAVAILABLE') {
+    ScreenComponent = <Unavailable />
+  }
 
-      <div className='wc-body'>
-        <div className='wc-content govuk-body-s'>
-          {ScreenComponent}
-        </div>
+  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-title'>
+      <div className='wc-panel__inner'>
+        {ScreenComponent}
       </div>
     </div>
   )
 
-  return createPortal(Component, document.body)
+  return (
+    <>
+      {createPortal(Component, document.body)}
+    </>
+  )
 }