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

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

@@ -7,10 +7,12 @@ 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()
@@ -64,6 +66,10 @@ export function Panel () {
 
   const onEscapeKey = useCallback(e => {
     if (e.key === 'Escape' || e.key === 'Esc') {
+      if (thread) {
+        thread.lastMessageSeen()
+        setUnseenCount(0)
+      }
       setChatVisibility(false)
     }
   }, [])
@@ -77,7 +83,9 @@ 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
 
@@ -92,11 +100,17 @@ export function Panel () {
       ScreenComponent = <Chat onSettingsScreen={goToSettingsScreen} onEndChatScreen={goToEndChatScreen} />
       break
     case 3:
-      ScreenComponent = <EndChat onChatScreen={goToChatScreen} />
+      ScreenComponent = <EndChat onChatScreen={goToChatScreen} onEndChatConfirm={goToFeedbackScreen} />
+      break
+    case 4:
+      ScreenComponent = <Feedback onCancel={() => setChatVisibility(false)} onConfirmSubmit={goToEndFeedbackScreen} />
       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,14 +1,34 @@
 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'>Yes, end chat</a>
+          <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>
         </div>
       </div>

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

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

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

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

@@ -59,6 +59,7 @@ export function RequestChat ({ onPreChatScreen }) {
         setCustomerId(customerId)
         setThreadId(threadId)
         setThread(thread)
+        thread.setCustomField('threadid', threadId)
       } catch (err) {
         console.log('[Request Chat Error]', err)
       }

package/src/client/store/AppProvider.jsx

@@ -52,6 +52,7 @@ 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)