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

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

@@ -1,112 +0,0 @@
-.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

@@ -1,77 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

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

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

@@ -1,97 +0,0 @@
-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)
-  }
-
-  const handleKeyPress = e => {
-    if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'settings-save') {
-      onSave(e)
-    } else if ((e.key === 'Enter' || e.key === ' ') && e.target.id === 'settings-cancel') {
-      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'
-              role='button'
-              onClick={onSave}
-              onKeyDown={handleKeyPress}
-            >
-              Save
-            </a>
-            <a
-              id='settings-cancel'
-              href='#'
-              className='wc-link govuk-link'
-              data-module='govuk-button'
-              role='button'
-              onClick={onCancel}
-              onKeyDown={handleKeyPress}
-            >
-              Cancel
-            </a>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}

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

@@ -1,23 +0,0 @@
-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/components/skip-link.jsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import { createPortal } from 'react-dom'
-import { useApp } from '../store/useApp'
-
-export const SkipLink = () => {
-  const { threadId, setInstigatorId } = useApp()
-
-  if (!threadId) {
-    return null
-  }
-
-  const targetContainer = document.getElementById('webchat-skip-link-container')
-
-  if (!targetContainer) {
-    return null
-  }
-
-  const onClick = e => {
-    e.preventDefault()
-    setInstigatorId(e.target.id)
-    window.location.hash = '#webchat'
-  }
-
-  return (
-    <>
-      {createPortal(
-        <a
-          id='webchat-skip-link'
-          href='#webchat'
-          className='govuk-skip-link'
-          data-module='govuk-skip-link'
-          onClick={onClick}
-          data-wc-skiplink
-          data-wc-open-btn
-        >
-          Skip to webchat
-        </a>,
-        targetContainer
-      )}
-    </>
-  )
-}