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

package/dist/client.js

@@ -24,10 +24,10 @@ __webpack_require__.r(__webpack_exports__);
 function Availability() {
   const {
     availability,
-    messages,
     isChatOpen,
     setChatVisibility,
-    unseenCount
+    unseenCount,
+    threadId
   } = (0,_store_useApp__WEBPACK_IMPORTED_MODULE_3__.useApp)();
   const [isFixed, setIsFixed] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const buttonRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
@@ -47,7 +47,7 @@ function Availability() {
   const intersectionCallback = entries => {
     const [entry] = entries;
     const isBelowFold = !entry.isIntersecting && entry.boundingClientRect.top > 0;
-    setIsFixed(!isChatOpen && isBelowFold);
+    setIsFixed(!isChatOpen && isBelowFold && threadId);
   };
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
     const observer = new window.IntersectionObserver(intersectionCallback, {
@@ -68,7 +68,7 @@ function Availability() {
     document.body.classList.toggle('wc-scroll-padding', isFixed);
   }, [isFixed]);
   let TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Show Chat");
-  if (!messages.length) {
+  if (!threadId) {
     TextComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, "Start Chat");
   }
   switch (availability) {
@@ -175,7 +175,6 @@ function Chat({
     connectionHeadlineText = 'Webchat is not currently available';
   }
   const sendMessage = e => {
-    e.preventDefault();
     if (messageRef.current.value.length === 0) {
       return;
     }
@@ -186,11 +185,20 @@ function Chat({
     }
     setUserMessage('');
   };
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+  const handleSubmit = e => {
+    e.preventDefault();
+    sendMessage();
+  };
   const saveChat = () => {
     const transcript = (0,_lib_transform_messages_js__WEBPACK_IMPORTED_MODULE_6__.formatTranscript)(messages);
     const saveChatLink = document.querySelector('#transcript-download');
     saveChatLink.setAttribute('href', `data:text/plain;charset=utf-8,${transcript}`);
-    saveChatLink.click();
   };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-status"
@@ -245,7 +253,8 @@ function Chat({
     className: "wc-footer__input"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("form", {
     className: "wc-form",
-    noValidate: true
+    noValidate: true,
+    onSubmit: handleSubmit
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
     className: "govuk-label wc-form__label govuk-!-font-size-16",
     htmlFor: "wc-form-textarea"
@@ -259,13 +268,13 @@ function Chat({
     id: "wc-form-textarea",
     name: "message",
     onChange: onChange,
+    onKeyPress: handleKeyPress,
     value: userMessage
   }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
     type: "submit",
     className: "wc-form__button govuk-button govuk-!-font-size-16",
     value: "Send",
-    "data-prevent-double-click": "true",
-    onClick: sendMessage
+    "data-prevent-double-click": "true"
   }))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-footer__settings"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
@@ -416,8 +425,10 @@ function PanelHeader() {
   const onClose = e => {
     e.preventDefault();
     setChatVisibility(false);
-    thread.lastMessageSeen();
-    setUnseenCount(0);
+    if (thread) {
+      thread.lastMessageSeen();
+      setUnseenCount(0);
+    }
   };
   let ButtonComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     className: "wc-header__close",
@@ -479,9 +490,13 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _screens_unavailable_jsx__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../screens/unavailable.jsx */ "./src/client/components/screens/unavailable.jsx");
 /* harmony import */ var _screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../screens/end-chat.jsx */ "./src/client/components/screens/end-chat.jsx");
 /* harmony import */ var _screens_settings_jsx__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../screens/settings.jsx */ "./src/client/components/screens/settings.jsx");
-/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
-/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
-/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+/* harmony import */ var _screens_feedback_jsx__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../screens/feedback.jsx */ "./src/client/components/screens/feedback.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+/* harmony import */ var _store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../../store/useChatSdk.js */ "./src/client/store/useChatSdk.js");
+/* harmony import */ var _hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../../hooks/useFocusedElements.js */ "./src/client/hooks/useFocusedElements.js");
+/* harmony import */ var _screens_end_feedback_jsx__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../screens/end-feedback.jsx */ "./src/client/components/screens/end-feedback.jsx");
+
+
 
 
 
@@ -504,13 +519,13 @@ function Panel() {
     setChatVisibility,
     setMessages,
     setUnseenCount
-  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_8__.useApp)();
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_9__.useApp)();
   const {
     fetchThread,
     fetchMessages
-  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_9__.useChatSdk)(sdk);
+  } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_10__.useChatSdk)(sdk);
   const [screen, setScreen] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(threadId ? 2 : 0);
-  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_10__.useFocusedElements)(screen);
+  (0,_hooks_useFocusedElements_js__WEBPACK_IMPORTED_MODULE_11__.useFocusedElements)(screen);
 
   /**
    * Initializes the eventListener for pressing the escape key
@@ -551,6 +566,10 @@ function Panel() {
   }, [thread, threadId]);
   const onEscapeKey = (0,react__WEBPACK_IMPORTED_MODULE_0__.useCallback)(e => {
     if (e.key === 'Escape' || e.key === 'Esc') {
+      if (thread) {
+        thread.lastMessageSeen();
+        setUnseenCount(0);
+      }
       setChatVisibility(false);
     }
   }, []);
@@ -562,7 +581,9 @@ 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;
   switch (screen) {
     case 0:
@@ -583,7 +604,14 @@ function Panel() {
       break;
     case 3:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_end_chat_jsx__WEBPACK_IMPORTED_MODULE_6__.EndChat, {
-        onChatScreen: goToChatScreen
+        onChatScreen: goToChatScreen,
+        onEndChatConfirm: goToFeedbackScreen
+      });
+      break;
+    case 4:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_feedback_jsx__WEBPACK_IMPORTED_MODULE_8__.Feedback, {
+        onCancel: () => setChatVisibility(false),
+        onConfirmSubmit: goToEndFeedbackScreen
       });
       break;
     case 5:
@@ -591,6 +619,11 @@ function Panel() {
         onCancel: goToChatScreen
       });
       break;
+    case 6:
+      ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_end_feedback_jsx__WEBPACK_IMPORTED_MODULE_12__.EndFeedback, {
+        onClose: () => setChatVisibility(false)
+      });
+      break;
     default:
       ScreenComponent = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_screens_pre_chat_jsx__WEBPACK_IMPORTED_MODULE_2__.PreChat, {
         onContinue: goToRequestChatScreen
@@ -625,11 +658,36 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+/* harmony import */ var _store_useApp_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../store/useApp.js */ "./src/client/store/useApp.js");
+
 
 
 function EndChat({
-  onChatScreen
+  onChatScreen,
+  onEndChatConfirm
 }) {
+  const {
+    setCustomerId,
+    setThreadId,
+    setMessages,
+    agentStatus,
+    thread,
+    setUnseenCount
+  } = (0,_store_useApp_js__WEBPACK_IMPORTED_MODULE_2__.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);
+  };
   return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
     className: "wc-body"
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
@@ -640,7 +698,9 @@ function EndChat({
   }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     className: "govuk-button govuk-!-font-size-16",
-    "data-module": "govuk-button"
+    "data-module": "govuk-button",
+    id: "confirmEndChat",
+    onClick: confirmEndChat
   }, "Yes, end chat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
     href: "#",
     className: "govuk-link govuk-!-font-size-16",
@@ -650,6 +710,218 @@ function EndChat({
 
 /***/ }),
 
+/***/ "./src/client/components/screens/end-feedback.jsx":
+/*!********************************************************!*\
+  !*** ./src/client/components/screens/end-feedback.jsx ***!
+  \********************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   EndFeedback: () => (/* binding */ EndFeedback)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+
+
+function EndFeedback({
+  onClose
+}) {
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    id: "wc-subtitle",
+    class: "govuk-heading-m"
+  }, "Thank you for your feedback"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: "#",
+    role: "button",
+    draggable: "false",
+    "data-module": "govuk-button",
+    "data-wc-focus-visible": true,
+    "data-wc-close-btn": true,
+    onClick: onClose
+  }, "Close window"))));
+}
+
+/***/ }),
+
+/***/ "./src/client/components/screens/feedback.jsx":
+/*!****************************************************!*\
+  !*** ./src/client/components/screens/feedback.jsx ***!
+  \****************************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   Feedback: () => (/* binding */ Feedback)
+/* harmony export */ });
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../panel/panel-header.jsx */ "./src/client/components/panel/panel-header.jsx");
+
+
+function Feedback({
+  onConfirmSubmit,
+  onCancel
+}) {
+  const feedbackSubmit = async e => {
+    e.preventDefault();
+    onConfirmSubmit(e);
+    onCancel(e);
+  };
+  return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_panel_panel_header_jsx__WEBPACK_IMPORTED_MODULE_1__.PanelHeader, null), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "wc-body"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+    id: "wc-subtitle",
+    className: "govuk-heading-s"
+  }, "Give Feedback on Floodline webchat"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, "Please note we\u2019re unable to respond to feedback."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-form-group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("fieldset", {
+    className: "govuk-fieldset govuk-!-margin-bottom-4"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", {
+    className: "govuk-fieldset-heading govuk-fieldset__legend"
+  }, "Overall, how did you feel about webchat?"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios govuk-radios--small",
+    "data-module": "govuk-radios"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "very-satisfied",
+    name: "satisfaction",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "Very satisfied"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "very-satisfied"
+  }, "Very satisfied")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "satisfied",
+    name: "satisfaction",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "Satisfied"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "satisfied"
+  }, "Satisfied")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "no-opinion",
+    name: "satisfaction",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "No opinion"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "no-opinion"
+  }, "No Opinion")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "dissatisfied",
+    name: "satisfaction",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "Dissatisfied"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "dissatisfied"
+  }, "Dissatisfied")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "very-dissatisfied",
+    name: "satisfaction",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "Very dissatisfied"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "very-dissatisfied"
+  }, "Very dissatisfied")))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("fieldset", {
+    className: "govuk-fieldset govuk-!-margin-bottom-4"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("legend", {
+    className: "govuk-fieldset__legend"
+  }, "Did the adviser answer your question?"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios govuk-radios--small",
+    "data-module": "govuk-radios"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "answer-yes",
+    name: "answer",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "Yes"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "answer-yes"
+  }, "Yes")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "answer-no",
+    name: "answer",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "No"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "answer-no"
+  }, "No")), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-radios__item"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    id: "answer-partly",
+    name: "answer",
+    type: "radio",
+    className: "govuk-radios__input",
+    value: "Partly"
+  }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label govuk-radios__label",
+    for: "answer-partly"
+  }, "Partly"))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-form-group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "govuk-label",
+    for: "improvements"
+  }, "How can we improve webchat? (optional)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("textarea", {
+    className: "govuk-textarea govuk-!-margin-bottom-4",
+    id: "improvements",
+    name: "improvements",
+    rows: "5"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-form-group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("label", {
+    className: "wc-fieldset-heading govuk-label",
+    for: "research"
+  }, "Tell us your email address if you want to take part in user research (optional)"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    id: "research-hint",
+    class: "wc-hint govuk-hint"
+  }, "We will not share your email address or use it for anything else. We\u2019ll delete it after 2 years."), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("input", {
+    className: "govuk-input govuk-!-margin-bottom-4",
+    id: "research",
+    name: "research",
+    "aria-describedby": "research-hint",
+    type: "text"
+  })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
+    className: "govuk-button-group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "feedback-save",
+    href: "#",
+    className: "govuk-button govuk-!-font-size-16",
+    "data-module": "govuk-button",
+    onClick: feedbackSubmit
+  }, "Submit"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    id: "feedback-cancel",
+    href: "#",
+    className: "govuk-link govuk-!-font-size-16",
+    "data-module": "govuk-button",
+    onClick: onCancel
+  }, "Cancel"))));
+}
+
+/***/ }),
+
 /***/ "./src/client/components/screens/pre-chat.jsx":
 /*!****************************************************!*\
   !*** ./src/client/components/screens/pre-chat.jsx ***!
@@ -760,6 +1032,7 @@ function RequestChat({
   } = (0,_store_useChatSdk_js__WEBPACK_IMPORTED_MODULE_5__.useChatSdk)(sdk);
   const [errors, setErrors] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)({});
   const [questionLength, setQuestionLength] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(0);
+  const [isButtonDisabled, setButtonDisabled] = (0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
   const nameRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
   const questionRef = (0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)();
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
@@ -784,6 +1057,7 @@ function RequestChat({
     }
     if (Object.keys(errs).length === 0) {
       try {
+        setButtonDisabled(true);
         const threadId = uuid__WEBPACK_IMPORTED_MODULE_1__.v4();
         const customerId = await fetchCustomerId();
         const thread = await fetchThread(threadId);
@@ -792,6 +1066,7 @@ function RequestChat({
         setCustomerId(customerId);
         setThreadId(threadId);
         setThread(thread);
+        thread.setCustomField('threadid', threadId);
       } catch (err) {
         console.log('[Request Chat Error]', err);
       }
@@ -867,8 +1142,9 @@ function RequestChat({
   }, questionHint))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", {
     className: "govuk-button govuk-!-margin-top-1 govuk-!-font-size-16",
     "data-module": "govuk-button",
-    onClick: onRequestChat
-  }, "Request chat"))));
+    onClick: onRequestChat,
+    disabled: isButtonDisabled
+  }, isButtonDisabled ? 'Requesting...' : 'Request Chat'))));
 }
 
 /***/ }),
@@ -1311,6 +1587,9 @@ const AppProvider = ({
     });
   };
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
+    sdk.onChatEvent('SetConsumerContactCustomFields', () => {
+      console.log('Custom field set');
+    });
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.LIVECHAT_RECOVERED, onLiveChatRecovered);
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.MESSAGE_CREATED, onMessageCreated);
     sdk.onChatEvent(_nice_devone_nice_cxone_chat_web_sdk__WEBPACK_IMPORTED_MODULE_1__.ChatEvent.AGENT_TYPING_STARTED, onAgentTypingStarted);