@defra/flood-webchat 0.0.1-beta.23 → 0.0.1-beta.25

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

@@ -12,7 +12,6 @@ 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()
@@ -22,6 +21,16 @@ export function Panel () {
 
   useFocusedElements(screen)
 
+  const onEscapeKey = useCallback(e => {
+    if (e.key === 'Escape' || e.key === 'Esc') {
+      if (threadId) {
+        thread?.lastMessageSeen()
+        setUnseenCount(0)
+      }
+      setChatVisibility(false)
+    }
+  }, [thread, threadId, setUnseenCount, setChatVisibility])
+
   /**
    * Initializes the eventListener for pressing the escape key
    */
@@ -31,7 +40,7 @@ export function Panel () {
     return () => {
       document.removeEventListener('keydown', escapeKeyEvent)
     }
-  }, [])
+  }, [onEscapeKey, setChatVisibility])
 
   /**
    * Recovers the thread if there is a threadId but no thread loaded in to state
@@ -64,16 +73,6 @@ export function Panel () {
     }
   }, [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)
@@ -85,8 +84,6 @@ export function Panel () {
   const goToEndChatScreen = handleScreenChange(3)
   const goToFeedbackScreen = handleScreenChange(4)
   const goToSettingsScreen = handleScreenChange(5)
-  const goToEndFeedbackScreen = handleScreenChange(6)
-
   let ScreenComponent
 
   switch (screen) {
@@ -103,14 +100,11 @@ export function Panel () {
       ScreenComponent = <EndChat onChatScreen={goToChatScreen} onEndChatConfirm={goToFeedbackScreen} />
       break
     case 4:
-      ScreenComponent = <Feedback onCancel={() => setChatVisibility(false)} onConfirmSubmit={goToEndFeedbackScreen} />
+      ScreenComponent = <Feedback onCancel={() => setChatVisibility(false)} />
       break
     case 5:
       ScreenComponent = <Settings onCancel={goToChatScreen} />
       break
-    case 6:
-      ScreenComponent = <EndFeedback onClose={() => setChatVisibility(false)} />
-      break
     default:
       ScreenComponent = <PreChat onContinue={goToRequestChatScreen} />
   }

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

@@ -28,8 +28,8 @@ export function EndChat ({ onChatScreen, onEndChatConfirm }) {
       <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>
+          <a href='#endChat' className='govuk-button govuk-!-font-size-16' data-module='govuk-button' id='confirmEndChat' onClick={confirmEndChat}>Yes, end chat</a>
+          <a href='#resumeChat' className='govuk-link govuk-!-font-size-16' onClick={onChatScreen}>No, resume chat</a>
         </div>
       </div>
     </>

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

@@ -1,11 +1,8 @@
 import React from 'react'
 import { PanelHeader } from '../panel/panel-header.jsx'
 
-export function Feedback ({ onConfirmSubmit, onCancel }) {
-  const feedbackSubmit = async e => {
-    e.preventDefault()
-
-    onConfirmSubmit(e)
+export function Feedback ({ onCancel }) {
+  const feedbackCancel = async e => {
     onCancel(e)
   }
 
@@ -16,132 +13,9 @@ export function Feedback ({ onConfirmSubmit, onCancel }) {
       <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>
-
+        <a className='govuk-link' href='#' target='_blank' rel='noreferrer'>Feedback Link</a>
         <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>
+          <a id='feedback-cancel' href='#' data-module='govuk-button' role='button' onClick={feedbackCancel}>Close</a>
         </div>
       </div>
     </>

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

@@ -18,21 +18,17 @@ export function PreChat ({ onContinue }) {
         </ul>
 
         <p className='govuk-body-s'>
-          {
-            'There are other ways to '
-          }
+          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>
-          {
-            ' and '
-          }
+          &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 className='govuk-body-s'>
-          {'Do not use webchat to '}
+          Do not use webchat to&nbsp;
           <a
             className='govuk-link'
             href='https://www.gov.uk/report-flood-cause'

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

@@ -12,7 +12,6 @@ const QUESTION_MAX_LENGTH = 500
 export function RequestChat ({ onPreChatScreen }) {
   const { sdk, setCustomerId, setThreadId, setThread } = useApp()
   const { fetchCustomerId, fetchThread } = useChatSdk(sdk)
-
   const [errors, setErrors] = useState({})
   const [questionLength, setQuestionLength] = useState(0)
   const [isButtonDisabled, setButtonDisabled] = useState(false)
@@ -20,6 +19,16 @@ export function RequestChat ({ onPreChatScreen }) {
   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()
@@ -30,6 +39,8 @@ export function RequestChat ({ onPreChatScreen }) {
     setQuestionLength(e.target.value.length)
   }
 
+  const buttonLabel = isButtonDisabled ? 'Requesting...' : 'Request Chat'
+
   const onRequestChat = async e => {
     e.preventDefault()
 
@@ -70,16 +81,6 @@ export function RequestChat ({ onPreChatScreen }) {
     setErrors(errs)
   }
 
-  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`
-  }
-
   return (
     <>
       <PanelHeader />
@@ -145,13 +146,18 @@ export function RequestChat ({ onPreChatScreen }) {
             </div>
           </div>
 
+          <div className='govuk-inset-text govuk-!-font-size-16'>
+            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='govuk-button govuk-!-margin-top-1 govuk-!-font-size-16'
             data-module='govuk-button'
             onClick={onRequestChat}
             disabled={isButtonDisabled}
           >
-            {isButtonDisabled ? 'Requesting...' : 'Request Chat'}
+            {buttonLabel}
           </button>
         </form>
       </div>

package/src/client/store/AppProvider.jsx

@@ -52,7 +52,6 @@ export const AppProvider = ({ sdk, availability, options, children }) => {
   }
 
   useEffect(() => {
-    sdk.onChatEvent('SetConsumerContactCustomFields', () => { console.log('Custom field set') })
     sdk.onChatEvent(ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered)
     sdk.onChatEvent(ChatEvent.MESSAGE_CREATED, onMessageCreated)
     sdk.onChatEvent(ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted)

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

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