@defra/flood-webchat 0.0.1-beta.50 → 0.0.1-beta.52

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

@@ -1,260 +0,0 @@
-@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;
-
-    &:link {
-      color: govuk-colour('black');
-    }
-  }
-}
-
-.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 {
-    display: flex;
-    flex-direction: column;
-    margin: 5px 15px 0;
-    max-width: 80%;
-    width: fit-content;
-
-    &.inbound {
-     margin-left: auto;
-    }
-
-    @include mq ($from: tablet) {
-      margin-left: 10px;
-      margin-right: 10px;
-    }
-
-    &:first-child {
-      padding-top: 15px;
-    }
-  }
-
-  &__from {
-    line-height: 1.25;
-    color: govuk-colour('dark-grey');
-    margin-top: 2px;
-    margin-bottom: 2px;
-
-    .inbound {
-      display: block;
-      text-align: right;
-    }
-  }
-
-  &__text {
-    font-size: 16px;
-    padding: 10px 12.5px;
-    margin-bottom: 0;
-    display: inline-block;
-    border: 1px solid transparent;
-    overflow-wrap: anywhere;
-
-    @media (forced-colors: active) {
-      border-color: currentColor;
-    }
-
-    &.inbound {
-      color: govuk-colour('white');
-      background-color: govuk-colour('blue');
-      border-radius: 10px 0 10px 10px;
-
-      .govuk-link:visited {
-        color: govuk-colour('white');
-      }
-
-      .govuk-link:focus {
-        color: govuk-colour('black');
-      }
-    }
-
-    &.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);
-      }
-
-      &:link {
-        color: govuk-colour('black');
-      }
-    }
-  }
-
-  &__input {
-    @include govuk-responsive-padding(2);
-
-    border-top: 1px solid govuk-colour('black');
-  }
-}

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

@@ -1,34 +0,0 @@
-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/live-region.jsx

@@ -1,55 +0,0 @@
-import React, { useEffect, useState, useCallback } from 'react'
-import debounce from 'lodash.debounce'
-import { useApp } from '../store/useApp'
-
-const DEBOUNCE_MILLISECONDS = 2000
-
-export const LiveRegion = () => {
-  const { agentStatus, liveRegionText, setLiveRegionText } = useApp()
-
-  const [textA, setTextA] = useState()
-  const [textB, setTextB] = useState()
-
-  const isSessionEnded = agentStatus === 'closed' || agentStatus === null
-
-  const clearText = () => {
-    setTextA()
-    setTextB()
-  }
-
-  const setText = useCallback(debounce(text => {
-    if (textA) {
-      setTextB(text)
-    } else {
-      setTextA(text)
-    }
-  }, DEBOUNCE_MILLISECONDS), [textA, textB])
-
-  useEffect(() => {
-    if (liveRegionText) {
-      clearText()
-      setText(liveRegionText)
-    }
-
-    if (isSessionEnded) {
-      clearText()
-      setLiveRegionText()
-    }
-
-    return () => {
-      clearText()
-      setLiveRegionText()
-    }
-  }, [liveRegionText])
-
-  return (
-    <>
-      <div className='wc-live' role='status' aria-atomic='true'>
-        {textA}
-      </div>
-      <div className='wc-live' role='status' aria-atomic='true'>
-        {textB}
-      </div>
-    </>
-  )
-}

package/src/client/components/message/message.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-import { classnames } from '../../lib/classnames'
-import { formatMessage } from '../../lib/transform-messages'
-
-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 className={classnames(outbound ? 'outbound' : 'inbound')}>{outbound ? message.assignee : 'You'}</span>}
-        <span className='govuk-visually-hidden'>:</span>
-      </div>
-      <div className={classnames('wc-chat__text', outbound ? 'outbound' : 'inbound')}>
-        {formatMessage(message.text)}
-      </div>
-    </li>
-  )
-}

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

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

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

@@ -1,75 +0,0 @@
-import React from 'react'
-import { useApp } from '../../store/useApp.js'
-import { historyReplaceState } from '../../lib/history.js'
-
-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' />
-      </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
-    }
-  }
-
-  if (!threadId && isMobileAndNoHistory) {
-    RightButtonComponent = CloseButtonComponent
-  }
-
-  if (isMobileAndHasHistory) {
-    RightButtonComponent = null
-  }
-
-  return (
-    <div className='wc-header'>
-      {isMobileAndHasHistory ? BackButtonComponent : null}
-
-      <h2 id='wc-header' className='wc-header__title'>
-        Floodline webchat
-      </h2>
-
-      {RightButtonComponent}
-    </div>
-  )
-}

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

@@ -1,163 +0,0 @@
-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)}
-    </>
-  )
-}