@defra/flood-webchat 0.0.1-beta.22 → 0.0.1-beta.24

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

@@ -7,12 +7,10 @@ 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()
@@ -66,10 +64,6 @@ export function Panel () {
 
   const onEscapeKey = useCallback(e => {
     if (e.key === 'Escape' || e.key === 'Esc') {
-      if (thread) {
-        thread.lastMessageSeen()
-        setUnseenCount(0)
-      }
       setChatVisibility(false)
     }
   }, [])
@@ -83,9 +77,7 @@ export function Panel () {
   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
 
@@ -100,17 +92,11 @@ export function Panel () {
       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} />
+      ScreenComponent = <EndChat onChatScreen={goToChatScreen} />
       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

@@ -1,34 +1,14 @@
 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, setUnseenCount } = useApp()
-
-  const confirmEndChat = async e => {
-    e.preventDefault()
-
-    setThreadId()
-    setMessages([])
-    setCustomerId()
-    thread.lastMessageSeen()
-    setUnseenCount(0)
-
-    // End chat if still open
-    if (agentStatus !== 'closed') {
-      thread.endChat()
-    }
-
-    onEndChatConfirm(e)
-  }
 
+export function EndChat ({ onChatScreen }) {
   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-button govuk-!-font-size-16' data-module='govuk-button'>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/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

@@ -59,7 +59,6 @@ export function RequestChat ({ onPreChatScreen }) {
         setCustomerId(customerId)
         setThreadId(threadId)
         setThread(thread)
-        thread.setCustomField('threadid', threadId)
       } catch (err) {
         console.log('[Request Chat Error]', err)
       }
@@ -143,8 +142,13 @@ 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'
+            className='govuk-button govuk-!-margin-bottom-3 govuk-!-font-size-16'
             data-module='govuk-button'
             onClick={onRequestChat}
           >

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>
-
-    </>
-  )
-}

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

@@ -1,154 +0,0 @@
-import React from 'react'
-import { PanelHeader } from '../panel/panel-header.jsx'
-
-export function Feedback ({ onCancel, onConfirmSubmit }) {
-  const feedbackSubmit = async e => {
-    e.preventDefault()
-
-    onConfirmSubmit(e)
-  }
-
-  const onCancelFeedback = (e) => {
-    e.preventDefault()
-
-    onCancel()
-  }
-
-  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={onCancelFeedback}>Cancel</a>
-        </div>
-      </div>
-    </>
-  )
-}